• Vue路由简介

    注意事项

    1. 路由组件通常放在pages文件夹，一般组件通常存放在components文件夹。
    2. 通过切换，‘隐藏’了的路由组件，，默认是被销毁掉的，需要的时候再去挂载。
    3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
    4. 整个应用只有一个router，可以通过组件的$router属性获取到。

    基本使用

    1. 安装vue-router，命令：npm i vue-router，如果是Vue2项目执行：npm i vue-router
    2. 导入插件：import VueRouter from 'vue-router'
    3. 应用插件：Vue.use(VueRouter)
    4. 编写router配置项，一般都是在src目录下创建router文件夹中编写router配置文件index.js，编写配置项： 
      1. import VueRouter from 'vue-router'
      2.  
      3. import About from '../components/About'
      4.  
      5. import Home from '../components/Home'
      6.  
      7. //创建并暴露一个路由器
      8. export default new VueRouter({
      9.     routes:[
      10.         {
      11.             path:"/about",
      12.             component:About
      13.         },
      14.         {
      15.             path:"/home",
      16.             component:Home
      17.         }
      18.     ]
      19. })

    5. 使用About去代替About

    6. 实现切换（active-class可配置高亮样式）

      2. <router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>

    7. 指定显示的位置

      2. <router-view>router-view>

    例子

    main.js

    1. import Vue from "vue"
    2.  
    3. import App from "./App"
    4.  
    5. import VueRouter from 'vue-router'
    6.  
    7. import router from "./router/index"
    8.  
    9. Vue.config.productionTip = false;
    10.  
    11.  
    12. Vue.use(VueRouter)
    13.  
    14. new Vue({
    15.     el: "#app",
    16.     render: h => h(App),
    17.     router:router
    18. })

    router/index.js

    1. import VueRouter from 'vue-router'
    2.  
    3. import About from '../components/About'
    4.  
    5. import Home from '../components/Home'
    6.  
    7. //创建并暴露一个路由器
    8. export default new VueRouter({
    9.     routes:[
    10.         {
    11.             path:"/about",
    12.             component:About
    13.         },
    14.         {
    15.             path:"/home",
    16.             component:Home
    17.         }
    18.     ]
    19. })

    App.vue

    1. <template>
    2.   <div>
    3.     <div>
    4.       <div class="row">
    5.         <div class="col-xs-offset-2 col-xs-8">
    6.           <div class="page-header"><h2>Vue Router Demoh2>div>
    7.         div>
    8.       div>
    9.       
    10.       <div class="row">
    11.         <div class="col-xs-2 col-xs-offset-2">
    12.           <div class="list-group">
    13.  
    14.             
    15.             
    16.             <router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
    17.             <router-link class="list-group-item" active-class="active" to="/home">Homerouter-link>
    18.           div>
    19.         div>
    20.  
    21.         <div class="col-xs-6">
    22.           <div class="panel">
    23.             <div class="panel-body">
    24.               
    25.               <router-view>router-view>
    26.             div>
    27.           div>
    28.         div>
    29.       div>
    30.     div>
    31.   div>
    32. template>
    33.  
    34. <script>
    35.  
    36. import About from "./components/About"
    37. import Home from "./components/Home"
    38.  
    39. export default {
    40.   name: "App",
    41.   components: {
    42.     About,
    43.     Home
    44.   },
    45. };
    46. script>
    47.  
    48. <style>
    49. style>

    About.vue与Home.vue

    1. <template>
    2.   <h2>我是About的内容h2>
    3. template>
    4.  
    5. <script>
    6. export default {
    7.     name:"About"
    8. }
    9. script>
    10.  
    11. <style>
    12.  
    13. style>
    14.  
    15. --------------------------------------------------------------------------------
    16.  
    17. <template>
    18.   <h2>我是Home的内容h2>
    19. template>
    20.  
    21. <script>
    22. export default {
    23.     name:"Home"
    24. }
    25. script>
    26.  
    27. <style>
    28.  
    29. style>

    多级路由

    1. 配置路由规则，使用children配置项： 
      1. export default new VueRouter({
      2.     routes:[
      3.         {
      4.             path:"/about",
      5.             component:About
      6.         },
      7.         {
      8.             path:"/home",
      9.             component:Home,
      10.             //通过children配置子路由
      11.             children:[
      12.                 {
      13.                     //此处一定不要写：/news
      14.                     path:"news",
      15.                     component:News
      16.                 },
      17.                 {
      18.                     path:"message",
      19.                     component:Message
      20.                 }
      21.             ]
      22.         }
      23.     ]
      24. })

    2. 调转（要写完整路径）

      <router-link to='/home/news'>Newsrouter-link>

    跳转路由并携带参数

    下面的代码通过query来传递参数

    query传值

    通过url的方式传值

    2. <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}router-link>
    3.  
    5. <template>
    6.   <ul>
    7.     <li>消息编号：{{$route.query.id}}li>
    8.     <li>消息标题：{{$route.query.title}}li>
    9.   ul>
    10. template>

    通过对象的方式传值

    2. <router-link
    3.     :to="{
    4.     path: '/home/message/detail',
    5.     query: {
    6.         id: m.id,
    7.         title: m.title,
    8.     },
    9.     }">
    10.     {{ m.title }}
    11. router-link>
    12.  
    14. <template>
    15.   <ul>
    16.     <li>消息编号：{{$route.query.id}}li>
    17.     <li>消息标题：{{$route.query.title}}li>
    18.   ul>
    19. template>

    命名路由

    1. children:[
    2.     {
    3.         name:"xin",  //给路由起名字
    4.         path:"detail",
    5.         component:Detail
    6.     }
    7. ]
    8.  
    9.  
    10. <router-link
    11.     :to="{
    12.     //跳转到指定名字的路由
    13.     name: 'xin',
    14.     query: {
    15.         id: m.id,
    16.         title: m.title,
    17.     },
    18.     }">
    19.     {{ m.title }}
    20. router-link>
    21.  
    22.  
    23. <router-link
    24.     :to="{
    25.     //跳转到指定名字的路由
    26.     name: 'xin'}">
    27.     {{ m.title }}
    28. router-link>

    params传值

    注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置。

    配置路由接收params参数

    1. routes:[
    2. {
    3.     //使用params跳转必须要用name属性进行跳转
    4.     name:"hahaha",
    5.     //使用占位符接收params参数
    6.     path:"detail/:id/:title"
    7.     component:About
    8. }
    9. ]
    10.  
    11. //------------------------------------------------------
    12.  
    13. //跳转并携带params参数,to的字符串写法
    14. <router-link :to='/home/message/detail/666/标题'>跳转router-link>
    15.  
    16. //跳转并携带params参数,to的对象写法
    17. <router-link :to='{
    18.     name:"hahaha",
    19.     params:{
    20.         id:666,
    21.         title:"你好"
    22.     }
    23. }'>跳转router-link>
    24.  
    25.  
    26. //接收参数
    27. <h1>{{$route.params.id}}h1>

    路由的props配置

    作用：让路由组件更方便的收到参数

    1. {
    2.     name:"xiangqing",
    3.     path:"detail:id",
    4.     component:Detail
    5.  
    6.     //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    7.     //props:{a:900}
    8.  
    9.     //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
    10.     //props:true
    11.  
    12.     //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    13.     //为回调函数，参数为路由的$route
    14.     props(route){
    15.         return {
    16.             id:route.query.id,
    17.             title.route.query.title
    18.         }
    19.     }
    20. }

    的replace属性

    1. 作用：控制路由跳转时操作浏览器历史记录的模式。
    2. 浏览器的历史记录有两种写入方式，分别是push和replace，push时追加历史记录，replace是替换当前记录，路由跳转时候默认为push。
    3. 开启replace模式。 
      <router-link replace :to="{path: '/home/message/detail',query: {id: m.id,title: m.title,},}">{{ m.title }}router-link>

    编程式路由导航

    编程式路由导航：不借助的路由导航，让路由更加灵活

    可以给按钮点击事件中添加下面五种代码。

    1. //以push的方式跳转
    2. pushShow(m){
    3.     this.$router.push({
    4.       name:"xiangqing",
    5.       query:{
    6.         id:m.id,
    7.         title:m.title
    8.       }
    9.     })
    10. }
    11.  
    12. //以replace的方式跳转
    13. replacShow(m){
    14.     this.$router.replace({
    15.       name:"xiangqing",
    16.       query:{
    17.         id:m.id,
    18.         title:m.title
    19.       }}
    20. )
    21.  
    22. //后退一步
    23. back(){
    24.   this.$router.back();
    25. }
    26.  
    27. //前进一步
    28. forward(){
    29.   this.$router.forward();
    30. }
    31.  
    32. testGo(){
    33.   //如果为正数向前前进n步，如果为负数向后后退n步
    34.   this.$router.go(1);
    35. }

    路由缓存

    路由切换的时候会销毁当前的路由去创建显示新的路由，如果被销毁的路由中有输入框中有信息，信息也会被销毁。

    keep-alive标签可以解决这种问题，默认是缓存所有的显示路由，可以通过include属性去设置对指定的组件进行缓存。

    作用：让不展示的路由组件保持挂载，不被销毁。

    1. <keep-alive>
    2.   <router-view>router-view>
    3. keep-alive>
    4.  
    6. <keep-alive include="News">
    7.   <router-view>router-view>
    8. keep-alive>
    9.  
    11. <keep-alive :include="['News','Mwssage']">
    12.   <router-view>router-view>
    13. keep-alive>

    activated与deactivated

    路由组件所独有的两个生命钩子，用于捕获路由组件的激活状态，与moundted同级

    当组件获取焦点时会自动调用：activated()

    当组件失去焦点时会自动调用：deactivated()

    路由守卫

    作用：对路由进行权限控制

    执行顺序：前置路由，后置路由，路由组件

    前置路由守卫

    1. const router=new VueRouter({
    2.     routes: [
    3.         {
    4.             path: "/about",
    5.             component: About
    6.         }
    7.     ]
    8. })
    9.  
    10. //全局前置路由守卫，初始化或者路由之前跳转时会触发
    11. //to:目标路由的信息，name属性为路由名
    12. //from:来源路由的信息，name属性为路由名
    13. //next:是否放行的函数，执行就放行
    14. router.beforeEach((to,from,next)=>{
    15.     next();  //执行next函数放行
    16. })

    meta属性

    1. const router=new VueRouter({
    2.     routes: [
    3.         {
    4.             path: "/about",
    5.             component: About,
    6.             //meta用于配置自定义属性
    7.             meta:{isAuth:true}
    8.         }
    9.     ]
    10. })
    11.  
    12. //使用时meta.isAuth

    后置路由守卫 

    1. //创建并暴露一个路由器
    2. const router = new VueRouter({
    3.     routes: [
    4.         {
    5.             path: "/about",
    6.             component: About,
    7.             meta: { title: "about" },
    8.         }
    9.     ]
    10. })
    11.  
    12. //全局后置路由守卫，before执行后执行
    13. router.afterEach((to, from) => {
    14.     //跳转之后改变网页标题
    15.     document.title = to.meta.title || '主页';
    16. })

    独享路由守卫

    某一个路由独享的守卫，用法与前置路由守卫一样。

    1. //创建并暴露一个路由器
    2. const router = new VueRouter({
    3.     routes: [
    4.         {
    5.             path: "/about",
    6.             component: About,
    7.             meta: { title: "about" },
    8.             beforeEnter(to,from,next){
    9.                  next();  //执行next放行               
    10.             }
    11.         },
    12.     ]
    13. })

    组件内守卫

    写在组件配置项中与mounted同级。

    用法与全局路由一致、

    1. //通过路由规则进入时调用
    2. beforeRouteEnter(to,from,next){
    3. }
    4.  
    5. //通过路由规则离开时调用
    6. beforeRouteleave(to,from,next){
    7. }

    路由器的两种工作模式

     

  • 相关阅读:
    http调用 采用 Basic Auth 进行请求
    护肤品销售系统
    UE4基础必学系列：数据驱动
    并发编程之深入理解CAS
    MYSQL函数，一篇文章看完！
    自动化测试开发 —— 如何封装自动化测试框架？
    LeetCode 1765 Map of Highest Peak (多源点BFS 推荐)
    看完不会来揍我 | R包的下载与安装 | 再也没有一个包可以逃出你的手掌心啦
    Leetcode376. 摆动序列
    Python爬虫的七个常用技巧总结，这些你一定得知道！
  • 原文地址：https://blog.csdn.net/LYXlyxll/article/details/126300840