安装
npm install vue-router
使用
用来配置路由 to:跳转的路径 router-link最终会被渲染成a标签 to 里面的值渲染成href的值
router-link和router-view都是一个全局的组件
<body>
<router-link to="/home" tag="div" class="a">首页</router-link>
<router-link to="/login" tag="button" class="b">登录</router-link>
<!--命名路由:将to改为动态属性,:to={name:路由名字}-->
<router-link to="{name:'first'}" >命名路由</router-link>
<!--router-view : 视图 路由匹配的组件显示在这里 一个router-view渲染一个组件-->
<router-view></router-view>
<!--xiaomi中写了嵌套路由-->
<template id="xiaomi">
<div>
小米登录
<router-link to="/login/detFir">详情一</router-link>
<router-link to="/login/detSec">详情二</router-link>
<router-view></router-view>
</div>
</template>
<body>
<script>
// 路由: 一个路径对应一个组件
// router-link 将编译成a标签显示;
// 1. 创建组件
// 2. 配置路由映射表: 路由映射表是一个对象;里面有path:路径 compoent 对应的是组件
// 3. 注册路由映射表
// 4. 把router挂载到vm实例上
let shouye = {
data(){
return {
con:"京东首页"
}
},
template:"<div>{{con}}</div>"
}
let denglu = {
data(){
return {
con:"小米登录"
}
},
template:"#xiaomi"
}
let detFir={
template:"<div>详情一内容</div>"
}
let detSec={
template:"<div>详情二内容</div>"
}
// 2.配置路由映射表;
// path : 当前组件的路径 component: 组件名
// router-link的to属性的属性值和该对象中path要对应上
let routes = [{
path:"/home",
component:shouye,
redirect:home,
name:"first"
},{
path:"/login",
component:denglu,
//配置路由用children
children:[{
path:"detFir",
component:detFir
},{
path:"detSec",
component:detSec
}]
}];
// 3. 注册路由映射表
let router = new VueRouter({
routes,
//修改对应路径的link类名,默认router-link-active
linkActiveClass:'current',
//不仅路径一样,参数也一样的时候,才会有此类名
linkExactActiveClass:'exactCurrent'
})
//4. 将router挂载到DOM实例上
let vm = new Vue({
el:"#app",
components:{},
router
});
</script>
编程式导航
- this.$router.push(参数[路径字符串]):直接从当前路由跳转url 到对应的组件上
- this.$router.back():回退上一次路由
- this.$router.go(number):让路由前进或者后退;
- this.$router.go(1):在浏览器记录中前进一步,等同于history.forward()
- this.$router.go(-1):后退一步记录,等同于history.back()
动态路由
- 可以路由传参:路径后面跟一个 :变量;这就是动态路由,也叫动态传参;会把路由id匹配后面的路径放在$route的params属性上,属性值就是id的值
- 优点:代码少,动态路由渲染的是同一个组件,当路由改变以后,home组件不会销毁,当前也不需要再次创建,复用之前的组件,性能高;生命周期的钩子函数也不会执行
<div id="app">
<router-link to="/home/1">第一本</router-link>
<router-link to="/home/2">第二本</router-link>
<router-view></router-view>
</div>
<script>
let home={
created(){
console.log(this);
},
destroyed(){
console.log("已销毁");
},
watch:{
//监听组件实例的$route属性
'$route'(to,from){
//监听路由被复用:可以通过watch监听$route属性
//to:最新的路由信息
//from:代表上一次的路由信息
console.log(to,from);
}
},
template:"<div>这是我喜欢的第{{$route.params.id}}本书</div>"
}
let routes=[{
path:"/home/:id",
component:home
}];
let router = new VueRouter({
routes
})
let vm = new Vue({
el:"#app",
router
});
</script>
命名路由
<div id="app">
<!-- 将to改成动态属性 :to={name:路由的名字}-->
<router-link :to="{name:'first'}">首页</router-link>
<router-view></router-view>
</div>
<script>
// url : 根据path和to中的路径进行匹配
// 名字匹配
// 命名路由: 给路由起个名字
let home = {
template:"<div>首页</div>"
}
// name :属性给该路由起一个名字
let routes=[{path:"/home",component:home,name:"first"}];
let router = new VueRouter({
routes
})
let vm = new Vue({
el:"#app",
router
});
</script>
路由传参
- :id 传参:<router-link to="/home/chuancan>;在routes 中 path :"/home/:id" ; 通过this.$route.xx 拿到参数
- query 传参:在要执行的方法中通过push传一个对象, this.route.query 可拿到参数
- params 传参:必须通过命名路由的方式才能使用params传参
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
</div>
<template id="list">
<div>
这是首页<button @click="fn">跳转列表</button>
query:{{$route.query.name}}
params:{{$route.params.id}}
</div>
</template>
<script>
let home={
methods: {
fn() {
this.$router.push({ path: '/list', query: { name: '小妖' } })
console.log(this.$route.query)
this.$router.push({name:"first",params:{id:1}})
console.log(this.$route.query)
}
},
template:"#list"
}
let list={
template:"<div>列表内容</div>"
}
let routes=[{
path:"/home",
component:home
},{
path:"/list",
name:"first",
component:list
}];
let router = new VueRouter({
routes
})
let vm = new Vue({
el:"#app",
router
});
</script>
命名视图
<div id="app">
<router-link to="/home">首页</router-link>
<router-view></router-view>
<router-view name="foo"></router-view>
</div>
<script>
let home = {
template:"<div>首页内容</div>"
}
let list = {
template:"<div>第二部分</div>"
}
let routes = [{
path:"/home",
components:{
default:home,
foo:list
}
}]
let router = new VueRouter({
routes
})
let vm = new Vue({
el:"#app",
router
})
</script>
导航(路由)守卫
全局守卫3个:
- 全局前置守卫:router.beforeEach((to,from,next)=>{next()})
- 全局解析守卫:router.beforeResolve((to,from,next)=>{next();})
- 全局后置守卫: router.afterEach((to,from)=>{console.log("切换成功")});
路由独享守卫1个
在 routes 中, beforeEnter:(to,from,next)=>{next()},发生在beforeResolve之前
组件内部守卫3个
在组件内部
- beforeRouteEnter(to,from,next){next(vm)=>{ console.log(vm) }}
- beforeRouteUpdata(to,from,next){next()};
- beforeRouteLeave(to,from,next){next()} 当离开该组件时,会触发该守卫;然后再触发全局的进入守卫beforeEach
参数变化,查询改变不会引发导航守卫,因为组件一直没变,只能watch监听$route 或 beforeRouteUpdate组件守卫 当切换导航时,到了特定的时间会默认调用一些钩子函数,那么这些函数就是导航守卫,可以在进入个导航或者离开导航时,可以在钩子函数中做一些事情