vue的路由使用

第一 （安装路由）：npm i vue-router

---

第二（配置路由）：

1.在src目录下创建router文件夹，在该文件夹下创建index.js2.在该js文件下配置路由：
 

import VueRouter from 'vue-router'  //引入VueRouter
import About from '组件路径'   //引入组件，About为引用组件名
import Home from '组件路径' 
import  Children1 from '组件路径'  

//创建router实例对象，去管理一组一组的路由规则：

export default new VueRouter({

    mode:"X",  //X为hash或者history。区别在于地址栏是否有#分割。默认为hash，该属性不填时为默认。
    routes:[
        {

            name:"Nabout"
            path:'/about',  //路径，一级路由一般这种写法
            component:About  //上述的引用组件名
        },   //第一个路由
        {
            path:'/home',
            component:Home,

             children:[

                        {

                            name:"Nchildren" , //路由名字
                            path:'children1',  //路径，二级路由一般这种写法，不要加“/”底层会自动加上
                            component:Children1  //上述的引用组件名

                                }

                ]  //二级路由不是必须可以省略
        }   //第二个路由，与第一个路由同级
    ]
})

---

第三（路由使用）：

1.在导航的地方使用：

<router-link active-class="active" to="/about">About</router-link>

（1）其中active-class="active" 表示选择该路由时使用active类，底层会自动判断，所以给路由都加上即可。（2）  to="/about"表示路径，该路径需要与配置的路由一致，vue的路由会匹配，匹配成功会使用该组件。值得注意的是二级路由需要填写一级路由的路径如："/home/children1"

（3）通过路由名字跳转：

<router-link active-class="active" :to="{name:'Nchildren'}">About</router-link>

2.在通过导航切换的地方使用：

<router-view></router-view> 

进行组件展示。

---

第四（路由器传参和接收参数）：

query传参（在导航的地方使用）：      

  <router-link active-class="active" :to="{

                path:"/about",

                query:{

                        key:value,

                ·        ············

        }

}">About</router-link>

普通传参（在导航的地方使用）：

<router-link active-class="active"  to="/about?key=value">About</router-link>

值得注意：如果需要用到vue中data数据需要使用es6模板字符串写法，:to="`/about?key=${value}`"

params传参（在导航的地方使用）：        

  <router-link active-class="active" :to="{

        name:"Nabout",  //使用该方式传参必须用name

        params:{

                key:value,

                ············
        }

}">About</router-link>

注意：该方式传参时需要修改路由配置，在传参的路由中添加/:key其中:key表示占位。如：

 {
            name:"Nabout"
            path:'/about/:key', 
            component:About,
            props:true,   //表示通过该方式传参时，所有参数都可以通过props形式接收。
        },   

query方式和普通方式接收参数：在需要的组件中使用$route.query.key

params方式接收参数：在需要的组件中使用$route.params.key

props方式接收参数：定义属性props ==》props:["key","···"]  ==》页面引用：{{key}}

                                                                          

---

---

                                        编程式路由

第一（路由安装与配置）：参照上述。

第二（路由使用）：

 {
            name:"Nabout"
            path:'/about/:key', 
            component:About,
           props:true,   //表示通过该方式传参时，所有参数都可以通过props形式接收。
        },   

2.this.$router.replace({

        path:"配置路由的路径 ", //与配置路由的路径一致。

        name:"路由名字"  //与配置路由的名字一致。（path与name可以只选其一）

        ·······  //如果需要传参，按照传参方式即可。（参照上面）

})   //该方式跳转，浏览器不可以前进后退。

---

---

                                          缓存路由组件

1.背景：由于路由切换会导致被切换的路由销毁，但有时候需要保留输入数据，此时则不希望切换的路由组件被销毁。因此使用缓存将路由组件缓存下来。

2.用法：

<keep-alive  :include="["组件名","····"]">

<router-view></router-view>

</keep-alive>   //include="组件名"可以省略，此时<router-view></router-view>中被引用的路由将全部被缓存下来。

---

---

                                 路由独有生命周期

----> activated(组件激活时被调用)

----> deactivated(组件被隐藏时被调用)