• 路由router

    1. 什么是路由?

      1. 一个路由就是一组映射关系（key - value）
      2. key 为路径，value 可能是 function 或 component

    2、安装\引入\基础使用
    只有vue-router3，才能应用于vue2；vue-router4可以应用于vue3中

    这里我们安装vue-router3：npm i vue-router@3

    引入vue-router：在入口js中引入：import VueRouter from 'vue-router'

    vue.use(VueRouter)

     

    多级路由

    即是由多个路由相互嵌套而形成的

    Banner作为title直接在App.vue中实现

    然后是About和Home作为路由组件在App.vue中。

    message和news继而继续嵌套在home中

    main.js

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3.  
    4. //引入VueRouter
    5. import VueRouter from 'vue-router'
    6.  
    7. //引入路由器
    8. import router from './router'
    9.  
    10.  
    11. Vue.config.productionTip = false
    12.  
    13. //应用插件
    14. Vue.use(VueRouter)
    15.  
    16. new Vue({
    17.     el:"#app",
    18.     render: h => h(App),
    19.     router
    20. })

    App.vue

    1. <template>
    2. 	<div>
    3. 		<div class="row">
    4. 			<Banner/>
    5. 		</div>
    6. 		<div class="row">
    7. 			<div class="col-xs-2 col-xs-offset-2">
    8. 				<div class="list-group">
    9. 					<!-- 原始html中我们使用a标签实现页面跳转 -->
    10. 					<!-- <a class="list-group-item active" href="./about.html">About</a>
    11. 					<a class="list-group-item" href="./home.html">Home</a> -->
    12. 					
    13. 					<!-- Vue中借助router-link标签实现路由的切换 -->
    14. 					<router-link class="list-group-item" active-class="active" to="/about"> 			
    15. 						About
    16.     				</router-link>
    17. 					<router-link class="list-group-item" active-class="active" to="/home">
    18.                         Home
    19.     				</router-link>
    20. 				</div>
    21. 			</div>
    22. 			<div class="col-xs-6">
    23. 				<div class="panel">
    24. 					<div class="panel-body">
    25. 						<!-- 指定组件的呈现位置 -->
    26. 						<router-view></router-view>
    27. 					</div>
    28. 				</div>
    29. 			</div>
    30. 		</div>
    31. 	</div>
    32. </template>
    33.  
    34. <script>
    35. import Banner from './components/Banner.vue'
    36.  
    37.  
    38. 	export default {
    39. 		name:'App',
    40. 		components:{Banner,}
    41. 	}
    42. </script>

    router/index.js

    1. //该文件专门应用于创建整个应用的路由器
    2. import VueRouter from 'vue-router'
    3.  
    4. //引入组件
    5. import About from '../pages/About'
    6. import Home from '../pages/Home'
    7. import News from '../pages/News'
    8. import Message from '../pages/Message'
    9.  
    10. const router = new VueRouter({
    11.     routes:[
    12.         {
    13.             path:'/about',
    14.             component:About
    15.         },
    16.         {
    17.             path:'/home',
    18.             component:Home,
    19.             children:[
    20.                 {
    21.                     path:'news',
    22.                     component:News,
    23.                 },
    24.                 {
    25.                     path:'message',
    26.                     component:Message,
    27.                 }
    28.             ]
    29.         }
    30.     ]
    31. })
    32.  
    33. export default router

    Banner.vue

    1. <template>
    2.   <div class="col-xs-offset-2 col-xs-8">
    3. 				<div class="page-header"><h2>Vue Router Demo</h2></div>
    4. 			</div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.     name:'Banner'
    10. }
    11. </script>
    12.  
    13. <style>
    14.  
    15. </style>

    About.vue

    1. <template>
    2.   <h2>我是About的内容</h2>
    3. </template>
    4.  
    5. <script>
    6. export default {
    7.     name:'About'
    8.  
    9. }
    10. </script>

    Home

    1. <template>
    2.     <div>
    3.               <h2>Home组件内容</h2>
    4.               <div>
    5.                 <ul class="nav nav-tabs">
    6.                   <li>
    7.                     <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
    8.                   </li>
    9.                   <li>
    10.                     <router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link>
    11.                   </li>
    12.                 </ul>
    13.                 <ul>
    14.                   <router-view></router-view>
    15.                 </ul>
    16.               </div>
    17.             </div>
    18.           
    19. </template>
    20.  
    21. <script>
    22.     export default {
    23.         name:'Home'
    24.     }
    25. </script>

    message

    1. <template>
    2.   <div>
    3.                 <div>
    4.                   <ul>
    5.                     <li>
    6.                       <a href="/message1">message001</a>&nbsp;&nbsp;
    7.                     </li>
    8.                     <li>
    9.                       <a href="/message2">message002</a>&nbsp;&nbsp;
    10.                     </li>
    11.                     <li>
    12.                       <a href="/message/3">message003</a>&nbsp;&nbsp;
    13.                     </li>
    14.                   </ul>
    15.                 </div>
    16.               </div>
    17. </template>
    18.  
    19. <script>
    20. export default {
    21.     name:'Mesage',
    22. }
    23. </script>
    24.  
    25. <style>
    26.  
    27. </style>

    news

    1. <template>
    2.    <ul>
    3.                   <li>news001</li>
    4.                   <li>news002</li>
    5.                   <li>news003</li>
    6.                 </ul>
    7. </template>
    8.  
    9. <script>
    10. export default {
    11.     name:'News',
    12. }
    13. </script>
    14.  
    15. <style>
    16.  
    17. </style>

    query的传参

    若是有很多的嵌套的情况下，一直如上嵌套是不现实的，所以可以通过传参的方法，将需要传递的参数直接带到下一个页面中

    下例即是在message下继续嵌套

    index.js（引入继续嵌套的detail）

    1. //该文件专门应用于创建整个应用的路由器
    2. import VueRouter from 'vue-router'
    3.  
    4. //引入组件
    5. import About from '../pages/About'
    6. import Home from '../pages/Home'
    7. import News from '../pages/News'
    8. import Message from '../pages/Message'
    9. import Detail from '../pages/Detail'
    10.  
    11. const router = new VueRouter({
    12.     routes:[
    13.         {
    14.             path:'/about',
    15.             component:About
    16.         },
    17.         {
    18.             path:'/home',
    19.             component:Home,
    20.             children:[
    21.                 {
    22.                     path:'news',
    23.                     component:News,
    24.                 },
    25.                 {
    26.                     path:'message',
    27.                     component:Message,
    28.                     children:[
    29.                         {
    30.                             path:'detail',
    31.                             component:Detail,
    32.                         }
    33.                     ]
    34.                 }
    35.             ]
    36.         }
    37.     ]
    38. })
    39.  
    40. export default router

    message（传递query参数）

    1. <template>
    2.   <div>
    3.                 <div>
    4.                   <ul>
    5.                     <li v-for="m in messageList" :key="m.id">
    6.                       <!-- 跳转路由并携带query参数，to的字符串写法 -->
    7.                       <!-- <router-link  :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
    8.                     
    9.                     <!-- 跳转路由并携带query参数，to的对象写法 -->
    10.                     <router-link :to="{
    11.                       path:'/home/message/detail',
    12.                       query:{
    13.                         id:m.id,
    14.                         title:m.title
    15.                       }
    16.                     }">
    17.                     {{m.title}}
    18.                     </router-link>
    19.                     </li>
    20.                     
    21.                   </ul>
    22.                   <hr>
    23.                   <router-view></router-view>
    24.                 </div>
    25.               </div>
    26. </template>
    27.  
    28. <script>
    29. export default {
    30.     name:'Mesage',
    31.     data(){
    32.       return{
    33.         messageList:[
    34.           {id:'001',title:'消息001'},
    35.           {id:'002',title:'消息002'},
    36.           {id:'003',title:'消息003'},
    37.         ]
    38.       }
    39.     }
    40. }
    41. </script>
    42.  
    43. <style>
    44.  
    45. </style>

    detail（接收参数）

    1. <template>
    2.   <ul>
    3.     <li>消息编号:{{$route.query.id}}</li>
    4.     <li>消息标题:{{$route.query.title}}</li>
    5.   </ul>
    6. </template>
    7.  
    8. <script>
    9. export default {
    10.     name:'Detail',
    11.     mounted(){
    12.         console.log(this.$route)
    13.     }
    14.  
    15. }
    16. </script>
    17.  
    18. <style>
    19.  
    20. </style>

    replace 

    类似于无痕浏览，即当前的router-link标签若加上了这个，则当前对该标签的操作是不可追回的

    App。vue

    1. <template>
    2. 	<div>
    3. 		<div class="row">
    4. 			<Banner/>
    5. 		</div>
    6. 		<div class="row">
    7. 			<div class="col-xs-2 col-xs-offset-2">
    8. 				<div class="list-group">
    9. 					<!-- 原始html中我们使用a标签实现页面跳转 -->
    10. 					<!-- <a class="list-group-item active" href="./about.html">About</a>
    11. 					<a class="list-group-item" href="./home.html">Home</a> -->
    12. 					
    13. 					<!-- Vue中借助router-link标签实现路由的切换 -->
    14. 					<router-link replace class="list-group-item" active-class="active" to="/about"> 			
    15. 						About
    16.     				</router-link>
    17. 					<router-link replace class="list-group-item" active-class="active" to="/home">
    18.                         Home
    19.     				</router-link>
    20. 				</div>
    21. 			</div>
    22. 			<div class="col-xs-6">
    23. 				<div class="panel">
    24. 					<div class="panel-body">
    25. 						<!-- 指定组件的呈现位置 -->
    26. 						<router-view></router-view>
    27. 					</div>
    28. 				</div>
    29. 			</div>
    30. 		</div>
    31. 	</div>
    32. </template>
    33.  
    34. <script>
    35. import Banner from './components/Banner.vue'
    36.  
    37.  
    38. 	export default {
    39. 		name:'App',
    40. 		components:{Banner,}
    41. 	}
    42. </script>

    activated和deactivated

    这是路由组件中两个独有的生命周期钩子，用于捕获路由组件的生命周期状态

    1. 具体使用：
      1. activated路由组件被激活时触发
      2. deactivated路由组件失活时触发

    News

    1. <template>
    2.    <ul>
    3.                   <li>news001 <input type="text"></li>
    4.                   <li>news002 <input type="text"></li>
    5.                   <li>news003 <input type="text"></li>
    6.                 </ul>
    7. </template>
    8.  
    9. <script>
    10. export default {
    11.     name:'News',
    12.     data(){
    13.       return{
    14.         opacity:1
    15.       }
    16.     },
    17.     activated(){
    18.       console.log('News组件被激活了')
    19.     },
    20.     deactivated(){
    21.       console.log('News组件失活了')
    22.     }
    23. }
    24. </script>
    25.

    路由守卫

    例子：在淘宝中，若是不经过登录，则是无法跳转到个人中心页面，即使点击个人中心，也是不能的，这就是路由守卫

    前置首位

    index.js

    1. //该文件专门用于创建整个应用的路由器
    2. import VueRouter from "vue-router";
    3. //引入组件
    4. import Home from '../pages/Home'
    5. import About from '../pages/About'
    6. import News from '../pages/News'
    7. import Message from '../pages/Message'
    8. import Detail from '../pages/Detail'
    9.  
    10.  
    11. //创建并暴露一个路由器
    12. const router = new VueRouter({
    13.     routes:[
    14.         {
    15.             name:'guanyu',
    16.             path:'/about',
    17.             component:About
    18.         },
    19.         {
    20.             name:'zhuye',
    21.             path:'/home',
    22.             component:Home,
    23.             children:[
    24.                 {
    25.                     name:'xinwen',
    26.                     path:'news',
    27.                     component:News,
    28.                     meta:{isAuth:true}
    29.                 },
    30.                 {
    31.                     name:'xiaoxi',
    32.                     path:'message',
    33.                     component:Message,
    34.                     meta:{isAuth:true},
    35.                     children:[
    36.                         {
    37.                             name:'xiangqing',
    38.                             path:'detail',
    39.                             component:Detail,
    40. 							props($route){
    41. 								return {
    42. 									id:$route.query.id,
    43. 									title:$route.query.title,
    44. 								}
    45. 							}
    46.                         }
    47.                     ]
    48.                 }
    49.             ]
    50.         }
    51.     ]
    52. })
    53.  
    54. //全局前置路由守卫--初始化时被调用，每次路由切换之前被调用
    55. router.beforeEach((to,from,next)=>{
    56.  console.log(to,from)
    57.  if(to.meta.isAuth){  //判断是否需要鉴权
    58.     if(localStorage.getItem('school')==='atguigu'){
    59.         next()
    60.      }
    61.      else{
    62.         alert('学校名不对，无权限查看')
    63.      }
    64.  }
    65.  else{
    66.     next()
    67.  }
    68. })
    69.  
    70. export default router

    全局守卫

    对路由组件权限的控制

    index.js

    1. //该文件专门用于创建整个应用的路由器
    2. import VueRouter from "vue-router";
    3. //引入组件
    4. import Home from '../pages/Home'
    5. import About from '../pages/About'
    6. import News from '../pages/News'
    7. import Message from '../pages/Message'
    8. import Detail from '../pages/Detail'
    9.  
    10.  
    11. //创建并暴露一个路由器
    12. const router = new VueRouter({
    13.     routes:[
    14.         {
    15.             name:'guanyu',
    16.             path:'/about',
    17.             component:About,
    18.             meta:{title:'关于'},
    19.         },
    20.         {
    21.             name:'zhuye',
    22.             path:'/home',
    23.             component:Home,
    24.             meta:{title:'主页'},
    25.             children:[
    26.                 {
    27.                     name:'xinwen',
    28.                     path:'news',
    29.                     component:News,
    30.                     meta:{isAuth:true,title:'新闻'}
    31.                 },
    32.                 {
    33.                     name:'xiaoxi',
    34.                     path:'message',
    35.                     component:Message,
    36.                     meta:{isAuth:true,title:'消息'},
    37.                     children:[
    38.                         {
    39.                             name:'xiangqing',
    40.                             path:'detail',
    41.                             component:Detail,
    42.                             meta:{isAuth:true,title:'详情'},
    43. 							props($route){
    44. 								return {
    45. 									id:$route.query.id,
    46. 									title:$route.query.title,
    47. 								}
    48. 							}
    49.                         }
    50.                     ]
    51.                 }
    52.             ]
    53.         }
    54.     ]
    55. })
    56.  
    57. //全局前置路由守卫--初始化时被调用，每次路由切换之前被调用
    58. router.beforeEach((to,from,next)=>{
    59.  console.log('前置路由守卫',to,from)
    60.  if(to.meta.isAuth){  //判断是否需要鉴权
    61.     if(localStorage.getItem('school')==='atguigu'){
    62.         next()
    63.      }
    64.      else{
    65.         alert('学校名不对，无权限查看')
    66.      }
    67.  }
    68.  else{
    69.     next()
    70.  }
    71. })
    72.  
    73. //全局后置路由守卫--初始化时被调用，每次路由切换之后被调用
    74. router.afterEach((to,from)=>{
    75.     console.log('后置路由守卫',to,from)
    76.     document.title=to.meta.title
    77. })
    78.  
    79. export default router

    独享路由守卫，针对于特别需求坐单独的路由守卫

    index.js

    1. //该文件专门用于创建整个应用的路由器
    2. import VueRouter from "vue-router";
    3. //引入组件
    4. import Home from '../pages/Home'
    5. import About from '../pages/About'
    6. import News from '../pages/News'
    7. import Message from '../pages/Message'
    8. import Detail from '../pages/Detail'
    9.  
    10.  
    11. //创建并暴露一个路由器
    12. const router = new VueRouter({
    13.     routes:[
    14.         {
    15.             name:'guanyu',
    16.             path:'/about',
    17.             component:About,
    18.             meta:{title:'关于'},
    19.         },
    20.         {
    21.             name:'zhuye',
    22.             path:'/home',
    23.             component:Home,
    24.             meta:{title:'主页'},
    25.             children:[
    26.                 {
    27.                     name:'xinwen',
    28.                     path:'news',
    29.                     component:News,
    30.                     meta:{isAuth:true,title:'新闻'},
    31.                     beforeEnter: (to, from, next) => {
    32.                         console.log('前置路由守卫',to,from)
    33.                         if(to.meta.isAuth){  //判断是否需要鉴权
    34.                                 if(localStorage.getItem('school')==='atguigu'){
    35.                                 next()
    36.                                   }
    37.                           else{
    38.                              alert('学校名不对，无权限查看')
    39.                             }
    40.                            }
    41.                         else{
    42.                           next()
    43.                         }
    44.                     }
    45.                 },
    46.                 {
    47.                     name:'xiaoxi',
    48.                     path:'message',
    49.                     component:Message,
    50.                     meta:{isAuth:true,title:'消息'},
    51.                     children:[
    52.                         {
    53.                             name:'xiangqing',
    54.                             path:'detail',
    55.                             component:Detail,
    56.                             meta:{isAuth:true,title:'详情'},
    57. 							props($route){
    58. 								return {
    59. 									id:$route.query.id,
    60. 									title:$route.query.title,
    61. 								}
    62. 							}
    63.                         }
    64.                     ]
    65.                 }
    66.             ]
    67.         }
    68.     ]
    69. })
    70.  
    71. // //全局前置路由守卫--初始化时被调用，每次路由切换之前被调用
    72. // router.beforeEach((to,from,next)=>{
    73. //  console.log('前置路由守卫',to,from)
    74. //  if(to.meta.isAuth){  //判断是否需要鉴权
    75. //     if(localStorage.getItem('school')==='atguigu'){
    76. //         next()
    77. //      }
    78. //      else{
    79. //         alert('学校名不对，无权限查看')
    80. //      }
    81. //  }
    82. //  else{
    83. //     next()
    84. //  }
    85. // })
    86.  
    87. // //全局后置路由守卫--初始化时被调用，每次路由切换之后被调用
    88. // router.afterEach((to,from)=>{
    89. //     console.log('后置路由守卫',to,from)
    90. //     document.title=to.meta.title
    91. // })
    92.  
    93.  
    94.  
    95.  
    96. export default router

  • 相关阅读:
    SpringBoot日志输出
    Nginx源码解析--configure
    1015: 【C1】【循环】【for】整数序列的元素最大跨度值
    【Docker 内核详解】cgroups 资源限制（一）：概念、作用、术语
    线性回归法学习笔记
    SpringBoot整合MinIO
    B站崩了，那晚负责修复的开发人员做了什么？
    【送书活动1】强势挑战Java，Kotlin杀回TIOBE榜单Top 20！
    【WSN布局】基于LICHTENBERG算的多目标传感器选择和放置优化问题研究附matlab代码
    了解CI/CD流水线
  • 原文地址：https://blog.csdn.net/2301_76386566/article/details/133786390