第一 (安装路由):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(组件被隐藏时被调用)