npm i vue-router

Vue.use(VueRouter)

//  引入vueRouter
importvueRouterfrom'vue-router'
// 引入組件
importAboutfrom'../components/About'
importHomefrom'../components/Home'
export default new vueRouter({
     routes: [{
             path: '/about',
             component: About
         },
         {
             path: '/home',
             component: Home
         },
     ]

        <divclass="list-group">
          <!-- 原始寫法——使用a標(biāo)簽進(jìn)行頁(yè)面的跳轉(zhuǎn) -->
          <!-- <a class="list-group-item active" href="./about.html" rel="external nofollow" >About</a>
          <a class="list-group-item" href="./home.html" rel="external nofollow" >Home</a>-->
          <!-- 使用vue-Router提供的標(biāo)簽進(jìn)行路徑的修改,實(shí)現(xiàn)路由的切換 -->
          <router-link 
            class="list-group-item"
            active-class="active"
            to="/about">About
           </router-link>
          <router-link 
            class="list-group-item"
            active-class="active"
            to="/home">Home
           </router-link>
        </div>

          <divclass="panel-body">
            <!-- 指定組件的呈現(xiàn)位置 -->
            <router-view>
            </router-view>
          </div>

    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
    ]

 
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',// 使用占位符聲明接收參數(shù)
                            component:Detail,
                        }
                    ]

<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的字符串寫法 -->
        <router-link:to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
        <!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)，to的對(duì)象寫法 -->
        <router-link
          :to="{
            // 簡(jiǎn)化路徑代碼
            name:'xiangqing',// 必須使用name，不能使用path
             //  params:所攜帶的參數(shù)
            params:{
                id:m.id,
                title:m.title,
            }
        }"
        >{{m.title}}</router-link>

    <div>
        <ul>
            <!-- params寫法 -->
            <li>消息：{{$route.params.id}}</li>
            <li>編號(hào)：{{$route.params.title}}</li>
        </ul>
    </div>

children: [{
    name: 'xiangqing',
    // path: 'detail/:id/:title', // 使用占位符聲明接收參數(shù)
    path: 'detail', // query不使用占位符聲明接收參數(shù)
    component: Detail,
    // props的第一種寫法
    // props:{a:"1",b:"2"},
    // 第二種寫法,值為布爾值，若布爾值為真，就會(huì)把該路由組件收到的所有params參數(shù)，以props的形式傳給Detail
    // props:true,
    // props的第三種寫法，值為函數(shù)
    props($route) {// 使用解構(gòu)賦值連續(xù)寫法簡(jiǎn)化代碼
        return {id:$route.query.id,title:$route.query.title}
    }
    // props({query:{id,title}}) {// 使用解構(gòu)賦值連續(xù)寫法簡(jiǎn)化代碼
    //     return {id,title}
    // }
}]

  methods: {
      //后退
    back() {
      this.$router.back();
    },
      //前進(jìn)
    forward() {
      this.$router.forward();
    },
      //可以后退也可以前進(jìn)
    test() {
      this.$router.go(-2);
    }
  }

<keep-alivelinclude= "News">
K router-view></router-view>
</keep-alive>

router.beforeEach((to, from, next) => {
    console.log(to, from);
    if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
        if (localStorage.getItem('school') ==='shanyu') {
            next();
        } else {
            alert('該學(xué)校無權(quán)限查看此內(nèi)容')
        }
    } else {
        next()
    }
})
// 后置路由守衛(wèi)，切換路由后調(diào)用
router.afterEach((to, from) => {
    console.log(to, from);
    document.title=to.meta.title||'山魚屋'
})

beforeEnter: (to, from, next) => {
                        console.log(to, from);
                        if (to.meta.isAuth) { //判斷是否需要鑒權(quán)
                            if (localStorage.getItem('school') ==='shanyu') {
                                next();
                            } else {
                                alert('該學(xué)校無權(quán)限查看此內(nèi)容')
                            }
                        } else {
                            next()
                        }
                    },

//進(jìn)入守衛(wèi):通過路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi):通過路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) {
?}