文章目录

• 前言
• 具体实现
• • index.js：路由器对象模块
  • main.js：入口JS
  • App.vue
  • Messages.vue
  • MessageDetail.vue

前言

具体实现

编写路由的3步
    1. 定义路由组件    
    2. 映射路由
    3. 编写路由2个标签

index.js：路由器对象模块

import Vue from "vue"
import VueRouter from "vue-router"
import About from "../views/About"
import Home from "../views/Home"
import News from "../views/News"
import Messages from "../views/Messages"
import MessageDetail from "../views/MessageDetail"
// 声明使用vue-router插件
/*
内部定义并注册了2个组件标签(router-link/router-view),
给组件对象添加了2个属性:
  1. $router: 路由器
  2. $route: 当前路由
 */
Vue.use(VueRouter);
export default new VueRouter({
  routes: [ // 注册应用中所有的路由 将path与路由组件对应
    { //一般路由
      path: "/about",  // path的最左侧 / 为根路径
      component: About,
      children:[  //嵌套路由（子路由）
        {
          path: "news",  //同 “/about/news”
          component: News
        },
        {
          path: "messages",
          component: Messages,
          children:[ //二次嵌套路由
            {
              path:"/about/messages/detail/:id", //占位语法 params参数 组件可通过 对象.$route.params.id取出
              component:MessageDetail
            }
          ]
        },
        {
          path:"/About",
          redirect: "/About/news"  //默认显示
        }
      ]
    },
    {
      path: "/home",
      component:Home
    },
    {  // 自动跳转路由
      path: "/", 
      redirect:"/home"
    }
  ]
});

main.js：入口JS

import Vue from "vue"
import App from "./App"
import router from "./router"  //引入路由器，由于是index.js写到这里文件夹就行
new Vue({
  el: "#app",
  components: {App},  // 映射组件标签
  template: "<App/>",  // 指定需要渲染到页面的模板
  router  // 注册路由器   故任务路由组件对象都有属性$router  $route
});

App.vue

<div class="list-group">
  <!--生成路由链接-->
  <router-link to="/about" class="list-group-item" >About</router-link>
  <router-link to="/home" class="list-group-item">Home</router-link>
</div>
。。。
<keep-alive>  <!--缓存路由组件：适用低实时性要求-->
  <router-view msg="abc"></router-view>  <!--本页的路由触发-->
</keep-alive>

PS：当组件被选中后，router-link会多出风格类名class=“router-link-exact-active router-link-active”，可认为给该修饰类增加style

.router-link-active{
	color:red;
}

Messages.vue

<template>
  <div>
    <ul>
      <li v-for="(item,index) in messagesArr" :key="item.id">
        <router-link :to="`/about/messages/detail/${item.id}`"> {{item.title}}</router-link>  <!--:to的右侧“”里被:强制绑定为变量（用JS语法-->
        <button @click="push(item.id)">push查看</button>
        <button @click="replace(item.id)">replace查看</button>
      </li>

    </ul>
    <hr>
    <router-view></router-view>
    <button @click="$router.back()">回退</button> <!--弹出栈顶地址并访问-->
  </div>
</template>
。。。
      methods:{
        push(id) {
          this.$router.push(`/about/messages/detail/${id}`); //访问该地址并压进栈
        },
        replace(id) {
          this.$router.replace(`/about/messages/detail/${id}`); //访问该地址并替换栈顶地址
        }
      }

向路由组件传递数据
    params:<router-link :to="`/about/messages/detail/${item.id}`"></router-link>
    props: <router-view msg='abc'>  //别的路由组件需用props接收为自身属性再使用，类似组件间props方式通信

MessageDetail.vue

watch:{
          $route:function (value) {
            const id = value.params.id;
            //.find是返回符合要求的第一个数组元素  .filter返回的是数组
            this.messageDetail =this.allMessagesDetails.find(detail =>detail.id===id);
          }
      }