1.传参动态路由，获取动态路由两种方式：
App.vue文件：
<!-- <router-link to="/ChildA?name=zhangsan">点我跳转ChildA</router-link> | -->
<router-link to="/ChildA/1">点我跳转ChildA--1</router-link> |
<router-link to="/ChildA/2">点我跳转ChildA--2</router-link> |
<router-link to="/ChildB?name=admin">点我跳转ChildB</router-link> |
<router-link to="/ChildB?name=zhangsan">点我跳转ChildB</router-link> |
ChildA.vue文件：
<template>
<div>
<h1>我是CHildA</h1>
{{getMsg}}
</div>
</template>
<script>
export default {
name:"ChildA",
/* 第二种方式使用props获取动态路由 */
props:['id'],
computed:{
/* 计算属性必须要使用return 返回一个值 */
getMsg:function(){
/* 获取动态路由的第一种方式 */
/* let id = this.$route.params.id;
if(id=='1'){
return '要好好学VUE哦1111'
}
if(id=='2'){
return '好好学react1111'
}
return '' */
/* 第二种通过props获得的id 使用this.id */
if(this.id=='1'){
return '要好好学VUE哦2222'
}else if(this.id=='2'){
return '好好学react2222'
}else{
return ''
}
}
}
}
</script>
<style>
</style>
ChildB.vue文件：
<template>
<div>
<h1>我是ChildB</h1>
{{msg}}
<!-- {{getMsg}} -->
</div>
</template>
<script>
//点击childb 跳转组件如果name传参的值是admin 就显示欢迎管理员
//如果值是zhangsan就显示 zhangsan好好学vue
//如果是其他人就显示 大家都来学习
export default {
name:'ChildB',
data(){
return{
msg:''
}
},
created(){
/* $router是路由的一个属性 可传参 */
/* console.log(this.$route.query.name); */
if(this.$route.query.name=='admin'){
this.msg = '欢迎管理员'
}
/* if(this.$route.query.name=='zhangsan'){
this.msg= 'zhangsan好好学vue'
}else{
this.msg= '大家都来学习'
} */
},
/* 监视属性，计算属性有缓存功能 */
watch:{
/* 在childB中一直监听全局的路由属性$route */
$route:{
handler:function(){
console.log(this.$route.query.name);
let name = this.$route.query.name
if(name=='admin'){
this.msg = '欢迎管理员'
}
if(name=='zhangsan'){
this.msg= 'zhangsan好好学vue'
}else{
this.msg= '大家都来学习'
}
}
},
/* 进入ChildB组件第一次路由发生变化就执行 */
immediate:true
},
/* 计算属性具有缓存功能 */
/* computed:{
getMsg:function(){
console.log(this.$route.query.name);
let name = this.$route.query.name
if(name=='admin'){
this.msg = '欢迎管理员'
}
if(name=='zhangsan'){
this.msg= 'zhangsan好好学vue'
}else{
this.msg= '大家都来学习'
}
}
}, */
}
</script>
<style>
</style>
router下index.js文件：
{
/* 动态路由 :id表示一个动态的内容 */
path:'/ChildA/:id',
name:'ChildA',
props:true,
component: () => import('../components/ChildA.vue')
},
{
path:'/ChildB',
name:'ChildB',
component: () => import('../components/ChildB.vue'),
}
},
2.添加子路由及跳转：
App.vue文件下：
<template>
<div id="app">
<nav>
<button @click="addR">添加vip路由</button>
<button @click="addR2">给about的子路由添加</button>
<button @click="addR3">跳转到about页面</button>
</nav>
<!-- router-view 组件是用来展示组件的容器 -->
<router-view/>
</div>
</template>
<script>
/* import router from './router'; */
export default {
name:"App",
methods:{
addR(){
console.log(this.$router);
/* addRoutes 已经弃用改用addRoute */
this.$router.addRoute({
path:'/vip',
name:'vip',
/* 路径使用@表示使用src的方式实现 */
component:()=>import('@/views/VipView.vue')
})
console.log(this.$router);
},
/* 给about加上子路由 */
addR2(){
/* 添加子路由的时候需要第一个参数是主路由的name值 */
this.$router.addRoute('about',{
path:'/aboutchild2',
name:'aboutchild2',
component: () => import('@/views/AboutChild2.vue')
})
/* this.$router.currentRoute 表示当前所在的路由 */
console.log(this.$router.currentRoute);
},
addR3(){
/* 第一种方法 */
/* 只能跳转一次,多次点击会报错 */
/* 可以在 router index.js里面抛出异常 */
/* this.$router.push('/about') */
/* 第二种方法 */
this.$router.push({name:'about'})
/* $route (路由对象信息) 可以获取路由的属性 比如query传参 动态路由
$router (路由对象实例) 提供了一些方法 比如push跳转页面 addRoute 增加路由
包括一些路由信息比如:当前所在的路由this.$router.currentRoute */
}
}
}
</script>
需要在 router index.js 里面抛出异常：
/* 抛出异常 */
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
3.设置全局局部钩子：
全局在router index.js 里面设置：
/* 全局路由守卫 每次路由跳转都会执行一遍 */
/* router.beforeEach((to,from,next)=>{
// to 表示要去的路由
// from 表示之前的路由
// next 必须要执行的行数 跳转的方法
//console.log('to',to);
console.log('from',from);
console.log('next',next);
next()
}) */
/* 监听全局路由离开时触发的钩子函数 */
/* ★ 没有next() */
/* router.afterEach((to,from)=>{
console.log('to',to);
console.log('from',from);
}) */
局部设置：
我们在之前的' ChildB '里面设置
{
path:'/ChildB',
name:'ChildB',
component: () => import('../components/ChildB.vue'),
/* 局部的路由钩子进入路由的时候触发 */
/* 因为同一个路径参数或者是动态路由,不会触发beforeEnter */
beforeEnter: (to, from, next) => {
console.log('to',to);
console.log('from',from);
next()
}
},
