路由的本质就是一组一组的键值对，可以根据路径渲染组件。
Vue的使用
一级路由
// 配置路由
export default new VueRouter({
routes: [
{
path: "/about",
component: About
},
{
path: "/home",
component: HomeH
}
]
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
<!-- 路由出口 -->
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
to也可以使用对象写法方便传参
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
也可以根据名称去跳转, 命名路由见后文
<router-link class="list-group-item" active-class="active" :to="{name:'about'}">About</router-link>
active表示被激活后给标签添加类名。
注：
- 路由组件通常存放在
pages文件夹，一般组件通常存放在components文件夹。 - 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息。 - 整个应用只有一个router，可以通过组件的
$router属性获取到。 - 在切换路由的时候不使用的组件已经被销毁掉了。
嵌套路由
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: "news",
component: News
},
{
path: "message",
component: Message
}
]
}
]
})
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
命名路由
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News,
},
{
path: 'message',
component: Message,
children: [
{
name : "detail",
path: 'detail',
component: Detail,
}
]
}
]
}
使用：
<router-link
:to="{
name: 'detail',
query: {
id: m.id,
title: m.title,
},
}"
>
{{ m.title }}
</router-link>
路由的props
路由配置
{
name:'detail',
path:'detail',
component:Detail,
//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
// props:{id:1,title:'hello'}
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
// props:true
//props的第三种写法，值为函数,在这里可以把路由传递的参数通过pros传递给组件，这样使用的时候非常方便
props($route){
return {
id:$route.query.id,
title:$route.query.title,
a:1,
b:'hello'
}
}
}
我们在detail组件处接收
<script>
export default {
name:'Detail',
props:['id','title'],
}
</script>
编程式路由导航
// push里需要传入一个对象，和申明式路由一样
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}) // 会记录沿途路径，相当于一级一级压栈
this.$router.replace() // 不会记录沿途路径
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退
缓存路由组件
可以缓存路由的值，因为切换路由的之后，组件被销毁对应的数据也没用了。
<!-- 缓存多个路由组件 -->
<keep-alive :include="['News','Message']">
<!-- 缓存一个路由组件 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
<!-- 如果不写的话会缓存所有展示到这里的组件 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
路由组件独有新的生命周期钩子
activated() {
// 组件被激活的时候触发
},
deactivated() {
// 组件失活的时候触发
},
```
#### 路由守卫
配置在router index.js中
守卫路由的安全
- 全局路由守卫
```js
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{isAuth:true,title:'详情'},
}
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
console.log('前置路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权，这个可以放到meta信息中
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
export default router
```
- 独享路由守卫
一个组件单独有的
```js
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'},
beforeEnter: (to, from, next) => {
console.log('独享路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
}
}
```
注意：只有一个，没有afterenter
- 组件内的守卫
```js
<script>
export default {
name:'About',
//通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
console.log('About--beforeRouteEnter',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
},
//通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
console.log('About--beforeRouteLeave',to,from)
next()
}
}
</script>
```
### 路由的工作模式
hash 和 history
```js
const router = new VueRouter({
mode:'history', // 在创建实例的时候设置模式
)}
```
如果使用history模式，我们点击路由只是路由的跳转不会发送网络请求，但是如果我们点击刷新就会按照这个路径去请求服务器，就会404。解决这个问题需要与后端配合或者使用代理服务器如Nginx。
注此文代码案例来源于尚硅谷视频教学。
