提示:个人学习和总结,如有错误欢迎指正
一、vue-router的使用
1、安装
npm install vue-router@3
vue-router3在vue2中使用,vue-router4在vue3使用
2、使用
在src文件夹下新建router/index.js文件
import VueRouter from "vue-router";
const router = new VueRouter({
mode: "hash",
// mode: "history",
routes: [
]
})
export default router
mode: “hash”,哈希模式,项目地址路径会带#
mode: “history”,history模式,项目地址不带#
在main.js中添加如下代码
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router
}).$mount('#app')
二 、vue-router的参数有几种方式
1、query写法,路径xxx?id=xx&&title=xxx
<template>
<div>
<p>to的写法query</p>
<ul>
<li v-for="item in newList" :key="item.id">
<router-link
:to="{
//name:'news1',
path: '/news1',
query:{
id:item.id,
title:item.title
}
}">
{{item.id}}--{{item.title}}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newList:[{
id:1,
title:'学习vue-router'
},
{
id:2,
title:'学习vue生态'
}]
}
},
}
</script>
对应的router
const router = new VueRouter({
routes: [
{
name: 'news1',
path: '/news1',
component: () => import('../pages/News1.vue'),
},
]
})
2、params写法,路径xxx/id/title
<p>to的写法param</p>
<ul>
<li v-for="item in newList" :key="item.id">
<router-link
:to="{
name:'news2',
params:{
id:item.id,
title:item.title
}
}">
{{item.id}}--{{item.title}}
</router-link>
</li>
</ul>
对应的router
const router = new VueRouter({
routes: [
{
name: 'news2',
path: '/news2/:id/:title',
component: () => import('../pages/News2.vue'),
},
]
})
三、vue-router的2种跳转方式
1、this.$router.push(“url”)
goDetail1() {
this.$router.push("/news1/newsDetail")
this.$router.push({
name: 'newsDetail'
})
},
2、this.$router.resolve 新开页打开
goDetail2() {
let routerData = this.$router.resolve({
path:'/news1/newsDetail'
})
console.log(routerData)
window.open(routerData.href)
}
四、导航守卫
1、全局前置守卫,全局后置守卫
在router/index.js中,设置全局前置守卫和全局后置守卫。
beforeEach进入路由之前,afterEach进入路由之后。
// 全局路由守卫-前置路由
router.beforeEach((to, from, next) => {
console.log(to)
console.log(from)
if ((to.name == 'home') || (to.name == 'news1')) {
console.log('全局路由守卫-前置路由工作')
next()
}
})
// 全局路由守卫-后置路由
router.afterEach((to, from) => {
console.log(to, from, '全局路由守卫-前置路由工作')
})
2、独享前置守卫
为某一个路由设置独享前置守卫。单独路由只有独享前置守卫,没有独享后置守卫。
const router = new VueRouter({
mode: "hash",
routes: [
{
name: 'news1',
path: '/news1',
component: () => import('../pages/News1.vue'),
// 嵌套路由
children: [
{
path: 'newsDetail',
component: () => import('../pages/NewsDetail.vue')
}
],
// 独享前置守卫
beforeEnter: (to, from, next) => {
console.log(to, from, next, '进入了new1页面')
next()
}
},
]
})
3、组件内的守卫
在组件里可以单独的设置守卫,与methods,created等方法平级。路由进入守卫beforeRouteEnter,和路由离开守卫beforeRouteLeave。
beforeRouteEnter (to, from, next) {
// ...
console.log(to, from, next,'@@@@进入news1')
next()
},
beforeRouteLeave (to, from, next) {
// ...
console.log(to, from, next,'@@@@离开new1')
next()
}
4、缓存路由组件,新增2个生命周期
keep-alive可以缓存组件,也可以缓存路由组件。
缓存的路由组件,在路由进入后,被激活触发生命周期activated。在跳转走后,不会被销毁,是失活状态,触发生命周期deactivated。
new1.vue
<template>
<div>
<p>我是新闻页面</p>
<p @click="goDetail1">{{$route.query.id}}--{{$route.query.title}}</p>
<p @click="goDetail2">新开页打开-{{$route.query.id}}--{{$route.query.title}}</p>
<keep-alive>
// 这里展示newsDetail组件
<router-view></router-view>
</keep-alive>
</div>
</template>
newsDetail组件
activated() {
console.log('我是newsDetail组件,我被激活了')
},
deactivated() {
console.log('我是newsDetail组件,我被失活了')
},
五、路由的prop设置
1、props: true
会把params的参数,以key-value形式传递给路由组件。路由组件通过props定义key,就可以接受value的值。但是query参数无法传递。
routes:[
{
name: 'news2',
path: '/news2/:id/:title',
component: () => import('../pages/News2.vue'),
props: true
},
]
New2页面使用
<template>
<div>
<p>我是新闻页面</p>
我是props传递的参数{{id}}@@@{{title}}
<!--<p>{{$route.params.id}}--{{$route.params.title}}</p>-->
</div>
</template>
<script>
export default {
props:['id','title'],
2、props:{xx: xxx},props当成普通一个对象去传递,路由组件里通过props去接受参数。
但是这样的普通对象,里面的key和value都是固定的了,不灵活。
3、props写成函数的形式,函数包含一个实参route,返回一个对象。
这样的写法的好处是,params和query参数,都可以传递。
routes: [
{
name: 'news1',
path: '/news1',
component: () => import('../pages/News1.vue'),
children: [
{
name: 'newsDetail',
path: 'newsDetail',
component: () => import('../pages/NewsDetail.vue')
}
],
beforeEnter: (to, from, next) => {
console.log(to, from, next, '进入了new1页面')
next()
},
// props: true, 第一种写法
// props: { 第二种写法
// name: '张三'
// },
// 第三种写法
props(route) {
// console.log(route)
return {
id: route.query.id,
title: route.query.title
}
}
},
]
在news1页面,用props接收参数就可以用了。
<template>
<div>
我是props传递的参数{{id}}@@@{{title}}
</div>
</template>
<script>
export default {
props:['id','title'],