Vue Router 是 路由管理器,构建单页面应用.

  如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由（详细见vue-cli 脚手架），如果选择y，后面下载依赖会自动下载vue-router。

一定要安装的话代码如下：

npm install vue-router

创建vue组件

  在模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，在src/router/index.js，这个文件就是路由的核心文件

   路由组件放置位置      pages文件夹或views文件夹         未使用的路由组件是被销毁了,使用路由是重新创建的     $router  VueRouter的实例化对象     $route   点击的路由组件的信息对象

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }，{
      path:'/hi',
      component:Hi,
      children:[        //子路由,嵌套路由 
        {path:'/',component:Son},
        {path:'son1',component:Son1},
        {path:'son2',component:Son2},
      ]
    }
  ]
})

在main.js的配置

import Vue from 'vue'
import App from './App.vue'
import store from './store'
// 引入vuerouter
import VueRouter from 'vue-router';
// 通过插件启动
Vue.use(VueRouter)
import router from "./router/index"

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

    <router-link :to="{name:'qwe'}">1号子路由</router-link> 
    <router-link to="/about/asd">2号子路由</router-link>

    <!-- 设置出口 -->
    <!-- <keep-alive include="AboutChildAsd">
      <router-view ></router-view >
    </keep-alive> -->

      <router-view ></router-view >

嵌套路由

  路由中输出路由 =>  子路由 index.js中设置 children:[{}]就是设置子路由 子路由中  path 不需要添加 /, 如果添加会被vue当做一级路由处理  就是第一段代码的子路由和嵌套路由部分

动态路由

  两种方式去添加动态路由,一种是在登录后查询路由表保存到vuex或者localStore下，然后通过前置守卫来动态的添加路由,另一种就是登陆之后使用$router.addRoute直接添加路由，后者并不推荐，因为再刷新页面的时候会出现无法找到页面的情况,只写第一种

在src/router/index.js里面配置

// 创建路由管理器
const router =  new VueRouter({
    mode:"history", // 设置路由模式
    // 设置路线
    routes:[
        {
            path:"/home",    // key
            meta:{title:"Home"},
            component:Home     // 组件
        },
        {
            path:"/qqq",    // key
            name:"qqq",
            meta:{bol:true,title:"大哥"},
            component:()=>import("./../pages/qqq")     // 组件
        },
        {
            path:"/about",  
            name:"about",
            meta:{title:"about"},
            component:()=>import("./../pages/About"),  
            // 路由独享守卫 路由进入之前触发
            // beforeEnter(to,from,next){
            //     if(to.meta.bol){
            //         next()
            //     }else{
            //         if(localStorage.getItem("name") == "xuxin"){
            //             // document.title = to.meta.title || "首页"
            //             next()  // 放行
            //         }else{
            //             // console.log(to,from);
            //             // document.title = from.meta.title 
            //             next({path:"/qqq"})
            //         }
                   
            //     }
            // },
            // 设置子路由
            children:[
                {   
                    //path 不需要添加/, 会被vue当做一级路由,
                    path:"qwe",   // key
                    name:"qwe",
                    component:AboutChildQwe,   
                },
                {
                    path:"asd",   // key
                    component:AboutChildAsd,   
                    children:[
                        {
                            name:"lol",
                            path:"lol/:id/:name",
                            component:Lol,  
                            props(route){
                                console.log(route.params.id);
                                return {
                                    id:route.params.id,
                                    name:route.params.name
                                }
                            }
                        },
                    ]
                },
            ]
        },
       
    ]
})

// 任何路由进入之前触发
// to 到哪里的路由信息对象  from 来自哪里的路由信息对象  
// 获取vuex数据 router.app.$store.....

// 全局前置守卫
// router.beforeEach((to,from,next)=>{
//     // console.log(to,from,"进入任何路由之前触发");
    // if(to.meta.bol){
    //     next()
    // }else{
    //     if(localStorage.getItem("name") == "xuxin"){
    //         // document.title = to.meta.title || "首页"
    //         next()  // 放行
    //     }else{
    //         // console.log(to,from);
    //         // document.title = from.meta.title 
    //         next({path:"/qqq"})
    //     }
       
    // }
// })

// 全局后置守卫   任何路由离开后触发
// router.afterEach((to,from)=>{
//     document.title = to.meta.title
// })

export default router

这是vuex的配置

import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from "vuex-persistedstate"


Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        routes: null
    },
    getters: {
        // getRouter: (state => {
        //     state.routes.find()
        // })
    },
    mutations: {
        routesMutation(state, payload) {
            state.routes = payload;
        }
    },
    actions: {
        routesActions(context, data) {
            context.commit("routesMutation", data)
        }
    },

    plugins: [createPersistedState()]
})