vue中vue-router的使用
一、什么是vue-router
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。
二、使用vue-router
1.配置路由
//新建index.js用于同一管理路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import router1 from './router1.js'
import router2 from './router2.js'
import router3 from './router3.js'
import router4 from './router4.js'
Vue.use(VueRouter)
const routes = [
...router1,
...router2,
...router3,
...router4
]
const router = new VueRouter({
routes:routes
})
router.beforeEach((to, from, next) => {
// console.log(to, from)
next()
})
export default router
//创建其他js用于配置路由
const Test = () => import( /* webpackChunkName: "Test" */ '../pages/Test')
const routes = [
{ path: '/', redirect: '/Test' },//路由重定向
{ path: '/Test', component: Test },
// { path: '/Test', component: Test, children:[
// { path: '', redirect: 'xxx' },
// { path: 'xxx', component: 'xxx' },
// ] }, //父子路由的写法 2.实现路由切换（active-class可配置高亮样式 ）
About 3.指定展示位置
三、多级路由
1.配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import A from '../views/A.vue'
import B from '../views/B.vue'
import C from '../views/C.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/Home',
},
{
path:'/Home',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children:[
{
path:'A',
name:"A",
component:A,
},
{
path:'B',
component:B,
},
{
path:'C',
component:C,
}
]
}
]
const router = new VueRouter({
routes
})
export default router
2.跳转
B组件 四、命名路由
用于简化路由的跳转
1.使用--给路由命名
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import A from '../views/A.vue'
import B from '../views/B.vue'
import C from '../views/C.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/Home',
},
{
path:'/Home',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children:[
{
path:'A',
name:"A",
component:A,
},
{
path:'B',
component:B,
},
{
path:'C',
component:C,
}
]
}
]
const router = new VueRouter({
routes
})
export default router
2.简化跳转
A组件 五、路由传参
1.路由的query参数传递
（1）普通路由传参
//方式一：跳转并携带query参数，to的字符串写法
B组件
//方式二：跳转并携带query参数，to的对象写法
C组件
//参数接收
this.$route.query.text
this.$route.query.id（2）命名路由传参
//命名路由传递参数
C组件
//参数接收
this.$route.query.text
this.$route.query.id2.路由的params参数
（1）配置路由，声明接收params参数
{
name:"B",
path:'B/:text/:id',
component:B,
},（2）传递参数
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
//跳转并携带params参数，to的字符串写法
B组件
//跳转并携带params参数，to的对象写法
B组件 （3）接收参数
this.$route.params.text
this.$route.params.id六、路由的props配置
让路由组件更方便的收到参数
1.配置路由
{
path:'C',
name:'C',
component:C,
props($route){
return {
id:$route.query.id,
text:$route.query.text
}
}
}2.传递参数
C组件 3.接收参数
//通过props接收
props:["text","id"],
this.text this.id七、编程式路由导航
不借助
1.编程式导航对应方法
this.$router.push() //默认跳转，追加历史记录
this.$router.replace() //替换当前记录
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退2.编程式路由导航的使用
//编程式导航，传递query参数
jumpA(){
this.$router.push({
path:'/About/A',
query:{
text:'我是A组件默认路由传递的参数',
id:77888
}
})
}
//编程式导航，传递params参数
jumpA(){
this.$router.push({
name:'A',
params:{
text:'我是A组件默认路由传递的参数',
id:77888
}
})
}
//编程式导航，props简化
{
path:'A',
name:"A",
component:A,
props($route){
return {
id:$route.params.id,
text:$route.params.text
}
}
},
//接收
props:["text","id"],
八、路由缓存组件
让不展示的路由组件保持挂载，不被销毁。
//默认都保持挂载，也可以通过include指定挂载组件
九、两个新的生命周期钩子
路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
activated(){
console.log("组件激活了");
},
deactivated(){
console.log("组件失活");
}十、组件路由守卫
对路由进行权限控制，可以进行一些权限判断
1.全局路由守卫
（1）全局前置守卫：初始化时执行、每次路由切换前执行
//to去往那个组件 from来自那个组件 next是否放行
router.beforeEach((to,from,next)=>{
console.log(to,from);
next()
})（2）全局后置守卫：初始化时执行、每次路由切换后执行，不需要放行
router.afterEach((to,from)=>{
console.log(to,from);
})2.独享路由守卫
{
path:'A',
name:"A",
component:A,
props($route){
return {
id:$route.params.id,
text:$route.params.text
}
},
beforeEnter(to,from,next){
console.log(to,from);
}
},3.组件内路由守卫
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
console.log("进入组件");
next()
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
console.log("离开组件");
next()
},