1.路由的基本使用
- router配置项
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
// 创建一个路由器
const router = new VueRouter({
routers: [
{
path: '/about'
component: About
},
{
path: '/home'
component: Home
},
]
})
<!-- Vue借助router-link标签实现路由的切换 -->
<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>
<!-- 指定组件呈现的位置 -->
<router-view></router-view>
- router-link最终会被解析为a标签
- active-class：当路由被激活的时候会带上类active
- to：路由配置的路径，用于跳到对应的组件
- 路由切换的时候被切换的路由组件会被销毁（可以用beforeDestroy()验证，后续可以用方法不销毁）
2.嵌套（多级）路由
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
// 创建一个路由器
const router = new VueRouter({
routers: [
{
path: '/about'
component: About
},
{
path: '/home'
component: Home,
children: [ // 通过children配置子级路由
{
path: 'news' // 这里不是用/news了
component: News
},
{
path: 'message'
component: Message
}
]
}
]
})
<!-- to='/home/news' 跳转的时候带上父级（后续有别的方法 第9点keep-alive） -->
<router-link active-class="active" to="/home/news">Home</router-link>
<router-link active-class="active" to="/home/message">Home</router-link>
<!-- 指定组件呈现的位置 -->
<router-view></router-view>
3.路由的query参数
- 传递参数
<!-- 路由跳转并携带query参数，to的字符串写法 -->
<router-link to="/home/message/detail?id=001&title=你好">跳转</router-link>
<!-- 路由跳转并携带query参数，to的对象写法 -->
<router-link :to="{
path: '/home/message/detail',
query: {
id:001,
title: '你好'
}">
跳转
</router-link>
- 接收参数
<template>
<ul>
<!-- 借助$route接受参数 -->
<li>消息编号：{{ $route.query.id }}</li>
<li>消息标题：{{ $route.query.title }}</li>
</ul>
</template>
4.命名路由
1.作用：简化路由的跳转
{
path: '/demo'
component: Demo
},
{
path: '/test'
component: Test,
children: [
{
name: 'hello' // 此处给路由命名
path: 'word'
component: Word
}
]
}
<router-link to="/demo/test/detail">跳转</router-link>
<!-- 简化 -->
<router-link :to="{ name: 'hello' }">跳转</router-link>
5.路由的params参数
1.配置路由, 声明接收params参数
{
path: '/home'
component: Home,
children: [ // 通过children配置子级路由
{
path: 'news' // 这里不是用/news了
component: News
},
{
path: 'message'
component: Message,
children: [
{
name: 'detail',
path: 'detail/:id/:title', // 使用占位符声明接收params参数
component: Detail
}
]
}
]
}
- 传递参数
<!-- 路由跳转并携带params参数，to的字符串写法 -->
<router-link to="/home/message/detail/001/你好">跳转</router-link>
<!-- 路由跳转并携带query参数，to的对象写法 -->
<router-link :to="{
name: 'detail',
params: {
id:001,
title: '你好'
}">
跳转
</router-link>
- 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
- 接收参数
<template>
<ul>
<!-- 借助$route接受参数 -->
<li>消息编号：{{ $route.params.id }}</li>
<li>消息标题：{{ $route.params.title }}</li>
</ul>
</template>
6.路由的props配置
{
path: '/home'
component: Home,
children: [ // 通过children配置子级路由
{
path: 'news' // 这里不是用/news了
component: News
},
{
path: 'message'
component: Message,
children: [
{
name: 'detail',
path: 'detail/:id/:title', // 使用占位符声明接收params参数
component: Detail,
// props的第一种写法，值为对象，该对象中的所有的key-value都会以props的形式传给Detail组件
props: { a: 1, b:'hello' }
// props的第二种写法,值为布尔值，若为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
props: true
// props的第三种写法，值为函数,该函数返回的对象中每一组key-value都会通props传递给Detail组件
props($route) {
return { id: $route.query.id, title: $route.query.title }
}
}
]
}
]
}
<template>
<ul>
<li>消息编号：{{ $route.params.id }}</li>
<li>消息标题：{{ $route.params.title }}</li>
</ul>
</template>
sc
7.router-link的replace属性
<router-link replce active-class="active" to="/home/news">Home</router-link>
<router-link replce active-class="active" to="/home/message">Home</router-link>
- 作用：控制路由跳转时擦做浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加记录，replace是替换当前记录，路由跳转的时候默认是push
8.编程式路由导航
// 需要借助$router 写到对应的事件中
this.$router.push({
name: 'detail',
params: {
id: '001',
title: 'hello'
}
})
this.$router.replace({
name: 'detail',
params: {
id: '001',
title: 'hello'
}
})
// 回退
this.$router.back()
// 前进
this.$router.forward()
// 前进/后退 n为正数则前进几步 负数就是后退几步
this.$router.go(n)
9.缓存路由组件
1.作用：让不展示的路由组件保持挂载，不被销毁
<router-link active-class="active" to="/home/news">Home</router-link>
<router-link active-class="active" to="/home/message">Home</router-link>
<!-- 这个News是组件名！ 组件名！ 组件名！ -->
<!-- 缓存一个 -->
<keep-live include="News">
<router-link></router-view>
</keep-live>
<!-- 缓存多个 -->
<keep-live :include="['News','Message']">
<router-view></router-view>
</keep-live>
10.生命周期钩子activated和deactivated
- 作用：路由组件独有的两个钩子，作用于捕获路由组件的激活状态
- activated路由组件被激活的时候触发
- deactivated路由组件失活的时候触发
11.路由守卫
1.全局前置/后置路由守卫（可以结合meta写逻辑）
// 创建并暴露一个路由器
const router = new VueRouter({
routers: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: { isAuth: true }
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: { title: '主页' }
},
]
})
// 全局前置路由守卫--初始化的时候、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
// to 跳转去哪里
// from 来自哪里
next() // 跳转
})
// 全局后置路由守卫--初始化的时候、每次路由切换之后被调用
router.afterEach((to, from) => {
// to 跳转去哪里
// from 来自哪里
})
export default router
2.独享路由守卫
const router = new VueRouter({
routers: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: { isAuth: true },
// 只有前置没有后置
beforeEnter: (to, from, next) => {
}
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: { title: '主页' }
},
]
})
3.组件内路由守卫
<template>
<div>About</div>
</template>
<script>
export default: {
name: 'About',
// 通过路由规则，进入该组件时被调用（一定是通过路由规则）
beforeRouteEnter (to, from, next) {
next()
}
// 通过路由规则，离开该组件时被调用（一定是通过路由规则）
beforeRouteLeave (to, from, next) {
next()
}
}
</script>
12.history模式和hash模式
对于url来说，hash值是#后面的内容，hash兼容性好
