vue Router路由自我总结

# npm安装路由、
# main.js中注入路由
# router.js中
    import Router from 'vue-router' 
    Vue.use(Router)
# 定义路由表
new VueRouter({
    linkActiveClass:'active',  //全局配置 router-link 标签生成的 CSS 类名
    routes:[
        //无嵌套路由
        {
            path:'/'   // '/'表示匹配首页
            name:'****'
            component:*****  
        },
        {
            path:'****'
            name:'****'
            component:*****
        },
        //嵌套路由
        {
            path:'/news'
            name:'****'
            component:*****,
            children:[
                {
                    path:'/news/sport',   //此写法是绝对路径
                    component:*****
                },
                {
                    path:'tech',  //前面没有/，此写法是相对路径，即：/news/tech
                    component:****
                },
                {
                    path:'',
                    redirect:'tech'  //重定向到某个路由，即默认选中某个路由
                }
            ]
        },
    ]
})
# 渲染出口
<router-view></router-view> 
# 路由跳转 
<router-link to='/home' tag='li'></router-link> 
//router-link 默认渲染出来的是 a 标签,如果需要让它渲染出来的是别的标签,则可以使用 tag 属性指定渲染后的标签，例如tag='li'
//可以在每个 router-link 上使用 active-class 来激活 CSS 类名： active-class='active' ,比较麻烦，需要每个加
  或者在 VueRouter 实例中,使用 linkActiveClass 全局配置 CSS 类名
//exact 类名精确匹配，用在路由为‘/’的首页上，防止出现切换其他路由时首页样式问题  
#缓存路由
<keep-alive>
    <router-view></router-view> 
</keep-alive>

  被包含在 <keep-alive> 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

#编程式路由
this.$router.push(path) 相当于点击路由链接(后退1步,会返回当前路由界面)
this.$router.replace(path) 用新路由替换当前路由(后退1步,不可返回到当前路由界面)
this.$router.back() 后退回上一个记录路由
this.$router.go(n) 参数 n 指定步数
this.$router.go(-1) 后退回上一个记录路由
this.$router.go(1) 向前进下一个记录路由