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()
? ? }
? },
