Vue路由简明实操笔记
路由
1、作用：
1）理解： 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理
2）前端路由：key是路径，value是组件
3）作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）
2、安装路由：
vue 版本为 2.x，建议 vue-router 安装 3.x 版本。
vue 版本为 3.x，建议 vue-router 安装 4.x 版本。
项目下package.json查看 vue 版本。
npm install [email protected]
默认安装，会默认安装最新版vuerouter,会引起报错！
3、创建并配置路由对象
项目中src目录下新建router目录，并在目录中新建index.js，内容如下：
// 引入依赖
import VueRouter from "vue-router"
//导入路由组件
//实际项目中，路由调用组件不放在components中，而是放在pages或者views目录中
import Home from "../pages/Home.vue"
import About from "../pages/About.vue"
// 使用插件
Vue.use(VueRouter)
// 创建实例并配置
export default new VueRouter({
routes: [ //注意：路由配置项，名称 routes 没有r 没有r 没有r
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
}
]
});
4、导入路由：
main.js文件中:
//其他代码略...
//导入路由插件
import VueRouter from 'vue-router'
//引入我们配置的路由
import router from './router/index'
//其他代码略...
//应用路由插件
Vue.use(VueRouter)
new Vue({
render: h => h(App),
//在vue实例中配置路由,简写了。router:router
router
}).$mount('#app')
5、基本路由
<router-link to="/home" active-class="xxx">Homerouter-link>
<router-link to="/about" active-class="xxx">Aboutrouter-link>
<router-view>router-view>
不再展示的路由组件，将会被销毁，不是隐藏，自己可以通过组件的vc实例销毁前钩子自行测试
每一个路由组件的vc实例对象身上都有两个属性：$route 和 $router
所有路由组件，都只需要在router/index.js中导入、在路由配置中注册即可
$route:组件自身的路由对象
$router:全局路由器
6、嵌套路由(多级路由)
首先，router/index.js配置多级路由：
// 引入依赖
import VueRouter from "vue-router"
//导入路由组件
import Home from "../pages/Home"
import About from "../pages/About"
import News from "../pages/News"
import Message from "../pages/Message"
// 创建实例并配置
export default new VueRouter({
routes: [
{
path: '/home', //为home配置子路由
component: Home,
children:[ //children配置项，对象数组，用于配置多级路由
{
path:'news',//子路由路径名称前面不加‘/’
component:News //对应组件
},
{
path:'message',
component:Message
}
]
},
{
path: '/about',
component: About
}
]
});
然后，一级路由组件内：
<template>
<div>
<h1>我是Home组件啊h1>
<ul class="nav">
<li><router-link to="/home/news" active-class="isactive">newsrouter-link>li>
<li><router-link to="/home/message" active-class="isactive">messagerouter-link>li>
ul>
<router-view>router-view>
div>
template>
<script>
export default {
name: 'Home'
};
script>
更多级同样。
6.1路由名字：
...
children:[
{
name:'test',//给某条路由配置名字，任意字符串
path:'MessageDetail',
component:MessageDetail
}
]
...
使用:
<router-link :to="{name:test}">xxx7、传递参数
7.1 query传参(url)
组件1 --传递—> 组件2
组件1：
<template>
<div>
<ul>
<li v-for="m in mList" :key="m.id">
<router-link :to="`/home/message/MessageDetail?id=${m.id}&title=${m.title}`">
{{m.title}}
router-link>
li>
ul>
<router-view>router-view>
div>
template>
组件2：
<template>
<div>
<span>{{this.$route.query.id}} - {{this.$route.query.title}} span>
div>
template>
7.2 params传参
配置：
...
children:[
{
name:'test',//给某条路由配置名字，任意字符串
path:'MessageDetail/:id/:title',// 这里:id/:title 是占位符，占位符名字，就是获取时候用的
component:MessageDetail
}
]
...
使用:
<router-link :to="`/home/message/MessageDetail/${${m.id}}/${${m.id}}`">xxxrouter-link>
获取值：
<span>{{this.$route.params.id}} - {{this.$route.params.title}} span>
7.3 参数的props配置
配置：
...
children:[
{
name:'test',//给某条路由配置名字，任意字符串
path:'MessageDetail/:id/:title',// 这里:id/:title 是占位符，占位符名字，就是获取时候用的
component:MessageDetail,
props:true
//还有种写法，值是写死的
//props:{id:123,title:'asdf'}
}
]
...
组件内：
//配置接收
props:['id','title'] //然后就可以使用了
仅仅适用于params传参
8、编程式路由跳转
比如按钮操作、定时跳转、条件跳转。。。
//该条记录，浏览器可后退
this.$router.push({ name:'hello', query:{ name:'aaa', age:12 } })
//该条记录，浏览器不可后退
this.$router.replace({ name:'hello', query:{ name:'aaa', age:12 } })
//后退操作
this.$router.back()
//前进操作
this.$router.forward()
目标组件取参数：
this.$route.query.name;
9、路由缓存
<keep-alive include="要缓存的路由组件">
<router-view>router-view>
keep-alive>
keep-alive不生效问题：如果组件的name和router配置的name不一样，也可能导致keep-alive无法生效，所以要配置成一样。
10、路由组件独有的两个生命周期
//激活,出现在了router-view
activated (){
...
// activated 在路由被激活时执行
}
//激活后取消
deactivated (){
...
// deactivated在路由失活的时候执行
}