路由传参和路由卫士

古城微笑少年丶 2021-08-19 15:06 614阅读 0赞

1.动态路由匹配

动态路由也可以叫做路由传参。
组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。

1. 动态路径参数

  1. 使用动态路由匹配中的 动态路径参数来进行路由配置。

  2. 注意：动态路径参数 以冒号：开头

    {name:”tema”,path:”/index/:id/:name”,component:tema},

2. 绑定参数

  1. 路由导航绑定参数的两种方式 但是注意 params只能通过路由配置中的name属性来引用路由

    index
    home


    home

  2. js方式进行参数绑定

    fun() {

    1. // 对动态数据不太友好
    2. // this.$router.push("/home/呵呵哒/heheda")
    3. this.$router.push({
    4.     name: 'home',
    5.     //params只能通过name来引入路由
    6.     params: {
    7.         xiaoming: this.linktexta,
    8.         xiaohong: this.linktextb
    9.     }
    10. })

    }

3. 获取路由传入参数

  1. 如果想得到路径参数那么使用$route.params.id

  2. 或者是使用this实例中的this.$route.params.id进行调用

    created(){

    1. //路由信心都被挂载到实例中去
    2. console.log("路由参数是："+this.$route.params.id+"---"+this.$route.params.name);

    }

params传参案例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  10. </head>
  12. <body>
  14.     <!-- 动态路由匹配  路由传参 -->
  15.     <!-- params的方式 -->
  16.     <!-- 语法：1.需要配置路由规则  :传递数据的名字 -->
  17.     <!-- 2.开始在导航中进行数据的传递  -->
  18.     <!-- 3.接收传递的数据   this.$route.params.xxxx -->
  20.     <div id="demodiv">
  21.         <router-link to="/index">index</router-link>
  22.         <!-- 2.在导航中进行数据的发送 -->
  23.         <!-- 声明式导航 -->
  24.         <!-- 2-1传递参数方式1 简单方便   对于传递动态数据不友好 -->
  25.         <!-- <router-link to="/home/呵呵/哈哈">home</router-link> -->
  26.         <!-- 2-2****推荐记忆推荐记忆*****传递方式2 语法稍微麻烦一些  但是对于动态数据非常友好 -->
  27.         <!-- <router-link :to={name:"对应的是路由规则里面的你先去的那个页面的name",params:{路由规则绑定的数据名:你要传递的数据}}></router-link> -->
  28.         <!-- <router-link :to="{name:'home',params:{xiaoming:linktexta,xiaohong:linktextb}}">home</router-link> -->
  29.         <!-- 编程式导航 -->
  30.         <!-- 2-3 -->
  31.         <button @click="fun()">点我去home</button>
  32.         <router-link to="/phone">phone</router-link>
  33.         <router-link to="/user">user</router-link>
  34.         <router-view></router-view>
  35.     </div>
  36.     <!-- 一级路由模板 -->
  37.     <template id="tema">
  38.         <div>
  39.             <p @click="fun()">{
  40.    {tematext}}</p>
  41.         </div>
  42.     </template>
  43.     <template id="temb">
  44.         <div>
  45.             homehomehomehomehomehomehome{
  46.    {this.$route.params.xiaoming}}----{
  47.    {this.$route.params.xiaohong}}
  48.         </div>
  49.     </template>
  50.     <template id="temc">
  51.         <div>
  52.             phonephonephonephonephonephonephone
  53.         </div>
  54.     </template>
  55.     <template id="temd">
  56.         <div>
  57.             useruseruseruseruseruseruser
  58.             <top-link></top-link>
  59.             <router-view></router-view>
  60.         </div>
  61.     </template>
  63.     <!-- 二级外部模板 -->
  64.     <template id="ertema">
  65.         <div>
  66.             我是二级路由11111111
  67.         </div>
  68.     </template>
  69.     <template id="ertemb">
  70.         <div>
  71.             我是二级路由2222222
  72.         </div>
  73.     </template>
  74.     <template id="ertemc">
  75.         <div>
  76.             我是二级路由333333333
  77.         </div>
  78.     </template>
  79.     <template id="toplinktem">
  80.         <div>
  81.             <router-link to="/user/ertema">ertema</router-link>
  82.             <router-link to="/user/ertemb">ertemb</router-link>
  83.             <router-link to="/user/ertemc">ertemc</router-link>
  84.         </div>
  85.     </template>
  86. </body>
  88. </html>
  89. <script src="node_modules/vue/dist/vue.min.js"></script>
  90. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  91. <script>
  92.     // 1.为什么要把组件中的内容提取出来单独赋值给一个变量
  94.     // 下面的是路由规则 
  95.     var tema = {
  96.         template: "#tema",
  97.         data() {
  98.             return {
  99.                 tematext: "你好我是index中的变量数据"
  100.             }
  101.         },
  102.         methods: {
  103.             fun() {
  104.                 alert("我是index的函数")
  105.             }
  106.         },
  107.         // created(){
  108.         //     alert("我是钩子函数")
  109.         // }
  110.     };
  111.     var temb = {
  112.         template: "#temb"
  113.     };
  114.     var temc = {
  115.         template: "#temc"
  116.     };
  117.     var temd = {
  118.         template: "#temd",
  119.         components: {
  120.             "topLink": {
  121.                 template: "#toplinktem"
  122.             }
  123.         }
  124.     };
  125.     // 二级路由的组件模板
  126.     var ertema = {
  127.         template: "#ertema"
  128.     };
  129.     var ertemb = {
  130.         template: "#ertemb"
  131.     };
  132.     var ertemc = {
  133.         template: "#ertemc"
  134.     };
  135.     var routes = [{
  136.             name: "index",
  137.             path: "/index",
  138.             component: tema
  139.         },
  140.         // params传参1 配置路由规则
  141.         {
  142.             name: "home",
  143.             path: "/home/:xiaoming/:xiaohong",
  144.             component: temb
  145.         },
  146.         {
  147.             name: "phone",
  148.             path: "/phone",
  149.             component: temc
  150.         },
  151.         {
  152.             name: "user",
  153.             path: "/user",
  154.             component: temd,
  155.             children: [{
  156.                     name: "ertema",
  157.                     path: "ertema",
  158.                     component: ertema
  159.                 },
  160.                 {
  161.                     name: "ertemb",
  162.                     path: "ertemb",
  163.                     component: ertemb
  164.                 },
  165.                 {
  166.                     name: "ertemc",
  167.                     path: "ertemc",
  168.                     component: ertemc
  169.                 }
  170.             ]
  171.         },
  172.         {
  173.             path: "/*",
  174.             redirect: "/index"
  175.         }
  176.     ]
  177.     var router = new VueRouter({
  178.         routes
  179.     })
  180.     new Vue({
  181.         el: "#demodiv",
  182.         router,
  183.         data: {
  184.             linktexta: "我是第1个1数1据",
  185.             linktextb: "我是第2个2数2据"
  186.         },
  187.         methods: {
  188.             fun() {
  189.                 // 对动态数据不太友好
  190.                 // this.$router.push("/home/呵呵哒/heheda")
  191.                 this.$router.push({
  192.                     name: 'home',
  193.                     params: {
  194.                         xiaoming: this.linktexta,
  195.                         xiaohong: this.linktextb
  196.                     }
  197.                 })
  198.             }
  199.         }
  200.     })
  201. </script>

query传参案例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!-- query传参 
  13.         语法：
  14.             1.不需要配置路由规则
  15.             2.传参
  16.             3.接受
  17.     -->
  18.     <div id="demodiv">
  19.         <router-link to="/index">首页</router-link>
  20.         <!-- query传参方式 -->
  21.         <!-- 1. -->
  22.         <router-link to="/home?xiaoming=呵呵&xiaohong=哈哈">home</router-link>
  23.         <!-- <router-link to="/home">小组</router-link> -->
  24.         <router-link to="/phone">手机</router-link>
  25.         <router-link to="/user">我的</router-link>
  26.         <router-view></router-view>
  27.     </div>
  29.     <!-- 创建一级路由模板start -->
  30.     <template id="tema">
  31.         <div>
  32.             <p @click="fun()">{
  33.    {tematext}}</p>
  34.         </div>
  35.     </template>
  36.     <template id="temb">
  37.         <div>
  38.             接收传递过来的参数
  39.             小组{
  40.    {this.$route.query.xiaoming}}======{
  41.    {this.$route.query.xiaohong}}
  42.         </div>
  43.     </template>
  44.     <template id="temc">
  45.         <div>
  46.             手机
  47.         </div>
  48.     </template>
  49.     <template id="temd">
  50.         <div>
  51.             我的
  52.             <toplink></toplink>
  53.             <router-view></router-view>
  54.         </div>
  55.     </template>
  56.     <!-- 创建一级路由模板end -->
  58.     <!-- 创建二级路由模板start -->
  59.     <template id="ertema">
  60.         <div>
  61.             我是二级路由11111111
  62.         </div>
  63.     </template>
  64.     <template id="ertemb">
  65.         <div>
  66.             我是二级路由22222222
  67.         </div>
  68.     </template>
  69.     <template id="ertemc">
  70.         <div>
  71.             我是二级路由33333333
  72.         </div>
  73.     </template>
  74.     <template id="ertemd">
  75.         <div>
  76.             我是二级路由44444444
  77.         </div>
  78.     </template>
  79.     <!-- 创建二级路由模板end -->
  81.     <template id="toplinktem">
  82.         <div>
  83.             <router-link to="/user/ertema">ertema</router-link>
  84.             <router-link to="/user/ertemb">ertemb</router-link>
  85.             <router-link to="/user/ertemc">ertemc</router-link>
  86.             <router-link to="/user/ertemd">ertemd</router-link>
  87.         </div>
  88.     </template>
  89. </body>
  91. </html>
  92. <script src="node_modules/vue/dist/vue.js"></script>
  93. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  94. <script>
  95.     // 创建一级路由模板组件start
  96.     var tema = {
  97.         template: "#tema",
  98.         data(){
  99.             return{
  100.                 tematext:"我是index中的变量数据"
  101.             }
  102.         },
  103.         methods:{
  104.             fun(){
  105.                 alert("我是index的函数")
  106.             }
  107.         }
  108.     };
  109.     var temb = {
  110.         template: "#temb"
  111.     };
  112.     var temc = {
  113.         template: "#temc"
  114.     };
  115.     var temd = {
  116.         template: "#temd",
  117.         components: {
  118.             "topLink":{
  119.                 template:"#toplinktem"
  120.             }
  121.         }
  122.     };
  123.     // 创建一级路由模板组件end
  125.     // 创建二级路由模板组件start
  126.     var ertema = {
  127.         template: "#ertema"
  128.     };
  129.     var ertemb = {
  130.         template: "#ertemb"
  131.     };
  132.     var ertemc = {
  133.         template: "#ertemc"
  134.     };
  135.     var ertemd = {
  136.         template: "#ertemd"
  137.     };
  138.     // 创建二级路由模板组件end
  140.     var routes = [{
  141.             name: "index",
  142.             path: "/index",
  143.             component: tema
  144.         },
  145.         {
  146.             name: "home",
  147.             path: "/home",
  148.             component: temb
  149.         },
  150.         {
  151.             name: "phone",
  152.             path: "/phone",
  153.             component: temc
  154.         },
  155.         {
  156.             name: "user",
  157.             path: "/user",
  158.             component: temd,
  159.             children:[
  160.                 {name:"ertema",path:"ertema",component:ertema},
  161.                 {name:"ertemb",path:"ertemb",component:ertemb},
  162.                 {name:"ertemc",path:"ertemc",component:ertemc},
  163.                 {name:"ertemd",path:"ertemd",component:ertemd},
  164.                 {path:"/*",redirect: "/index"}
  165.             ]
  166.         },
  167.     ]
  169.     const router = new VueRouter({
  170.         routes
  171.     })
  172.     new Vue({
  173.         el:"#demodiv",
  174.         data:{},
  175.         router,
  176.         data:{
  177.             linktexta:"数据111111",
  178.             linktextb:"数据222222"
  179.         }
  180.     })
  181. </script>

  1. params与query区别

    • 用法上的：
      params要用name来引入，接收参数都是类似的，分别是this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this. route.query.name和this.route.params.name。
    • url展示上的
      params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。

4. hash模式-history模式

hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。

  1. history模式

    • history模式没有#号，是个正常的url适合推广宣传。
    • 考虑url的规范那么就需要使用history模式，因为当然其功能也有区别，在开发app的时候有分享页面，这个分享出去的页面就是用vue做的，把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，history模式还有一个问题就是，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上。
  2. history模式与hash模式区别
    在这里插入图片描述

  3. history模式使用

    const router = new VueRouter({

    1. routes,
    2. mode:"history"

    })

案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="demodiv">
  11.         <router-link to="/index">首页</router-link>
  12.         <router-link to="/home">小组</router-link>
  13.         <router-link to="/phone">手机</router-link>
  14.         <router-link to="/user">我的</router-link>
  15.         <router-view ></router-view>
  16.     </div>
  17.     <!-- 创建一级路由模板start -->
  18.     <template id="tema"> 
  19.         <div>
  20.             <p @click="fun()">{
  21.    {tematext}}</p>
  22.         </div>
  23.     </template>
  24.     <template id="temb"> 
  25.         <div>
  26.             home
  27.         </div>
  28.     </template>
  29.     <template id="temc"> 
  30.         <div>
  31.             phone
  32.         </div>
  33.     </template>
  34.     <template id="temd"> 
  35.         <div>
  36.             user
  37.             <toplink></toplink>
  38.             <router-view></router-view>
  39.         </div>
  40.     </template>
  41.     <!-- 创建一级路由模板end -->
  43.     <!-- 创建二级路由模板start -->
  44.     <template id="ertema">
  45.         <div>
  46.             我是二级路由11111111
  47.         </div>
  48.     </template>
  49.     <template id="ertemb">
  50.         <div>
  51.             我是二级路由22222222
  52.         </div>
  53.     </template>
  54.     <template id="ertemc">
  55.         <div>
  56.             我是二级路由33333333
  57.         </div>
  58.     </template>
  59.     <template id="ertemd">
  60.         <div>
  61.             我是二级路由44444444
  62.         </div>
  63.     </template>
  64.     <!-- 创建二级路由模板end -->
  66.     <template id="toplinktem">
  67.         <div>
  68.             <router-link to="/user/ertema">ertema</router-link>
  69.             <router-link to="/user/ertemb">ertemb</router-link>
  70.             <router-link to="/user/ertemc">ertemc</router-link>
  71.             <router-link to="/user/ertemd">ertemd</router-link>
  72.         </div>
  73.     </template>
  74. </body>
  75. </html>
  76. <script src="node_modules/vue/dist/vue.js"></script>
  77. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  78. <script>
  79.     //一级路由组件start
  80.     var tema={
  81.                 template:"#tema",
  82.                 data(){
  83.                     return{
  84.                         tematext:"我是index中的变量数据",
  85.                     }
  86.                 },
  87.                 methods:{
  88.                     fun(){
  89.                         alert("我是index的函数");
  90.                     }
  91.                 }
  92.             };
  93.     var temb={template:"#temb"};
  94.     var temc={template:"#temc"};
  95.     var temd={
  96.                 template:"#temd",
  97.                 components:{
  98.                     "toplink":{
  99.                         template:"#toplinktem"
  100.                     }
  101.                 }
  102.             };
  103.     //一级路由组件end
  105.     // 二级路由组件start
  106.     var ertema={template:"#ertema"};
  107.     var ertemb={template:"#ertemb"};
  108.     var ertemc={template:"#ertemc"};
  109.     var ertemd={template:"#ertemd"};
  110.     // 二级路由组件end
  112.     //添加一级路由规则start
  113.     var routes=[
  114.         {name:"index",path:"/index",component:tema},
  115.         {name:"home",path:"/home",component:temb},
  116.         {name:"phone",path:"/phone",component:temc},
  117.         {name:"user",path:"/user",component:temd,children:[
  118.             {name:"ertema",path:"ertema",component:ertema},
  119.             {name:"ertemb",path:"ertemb",component:ertemb},
  120.             {name:"ertemc",path:"ertemc",component:ertemc},
  121.             {name:"ertemd",path:"ertemd",component:ertemd}
  122.         ]},
  123.         {path:"/*",redirect:"/index"}
  124.     ]
  125.     //添加一级路由规则end
  127.     // 创建路由实例
  128.     const router = new VueRouter({
  129.         routes,
  130.         mode:"history"
  131.     })
  132.     new Vue({
  133.         el:"#demodiv",
  134.         data:{},
  135.         router
  136.     })
  137. </script>

2. 路由守卫/导航守卫

1. 全局前置守卫

  1. 当一个导航触发时，全局前置守卫(在进入组件之前)按照创建顺序调用。
  2. vue-router 提供的 router.beforeEach（(to，from，next)=>{}）可以方便地实现全局前置导航守卫
  3. to：即将要进入的目标 路由对象
  4. from: 当前导航正要离开的路由

  5. next: 下一步执行
    案例：

    // 创建路由实例
    const router = new VueRouter({

    1. routes

    })

    // **
    // **
    // **
    // 全局前置守卫
    // **
    // **
    router.beforeEach((to, from, next) => {

    1. if(to.path=="/home"||to.path=="/phone"){
    2.     alert("对不起，请登录后再访问");
    3.     next("/user");
    4. }else{
    5.     next()
    6. }

    })

2. 全局后置钩子

  1. 当一个导航触发时，全局后置钩子(在进入组件之后)调用。
  2. vue-router 提供的 router.afterEach((to, from) => {})实现全局后置守卫
  3. to：即将要进入的目标 路由对象

  4. from: 当前导航正要离开的路由
    案例：

    // 创建路由实例
    const router = new VueRouter({

    1. routes

    })

    // **
    // **
    // 全局后置守卫
    // **
    // **
    router.afterEach((to,from)=>{

    1. console.log(from)

    })

案例：路由传参与路由卫士

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <!-- 总流程：
  11.         1.下载需要的库文件
  12.         2.新建vue基本框架
  13.         3.根据当前这个功能新建1级路由
  14.             3-1。新建路由组件与组件模板的引用
  15.             3-2 新建路由规则
  16.             3-3 实例化路由对像===》传入路由规则
  17.             3-4 把路由对象传入 vue实例
  18.             3-5 在合适的位置传入 router-view 路由出口
  19.             必须要测试
  20.         4.  因为根据当前需要完成点击列表内容  跳转到详情页面  （数据如何在两个页面中传递）====》路由传参
  21.             思考？用params 的方式还是query的方式 一定要在笔记中再次查看两者的语法  
  22.             在这个demo中我们使用params方式
  23.             4-1 设置路由规则的数据名
  24.             4-2 开始发送
  25.             4-3 接收并且测试本次路由传参是否正确的得到了数据
  26.         5. 开始设置数据（数据是通过ajax发送给后台并且返回）没有后台我们就用模拟数据
  27.     总流程完 -->
  28.     <div id="demodiv">
  29.         <topnav :obj="arr"></topnav>
  30.         <router-view></router-view>
  31.     </div>
  32.     <!-- 创建一级路由模板start -->
  33.     <template id="tema">
  34.         <div>
  35.             首页
  36.         </div>
  37.     </template>
  38.     <template id="temb">
  39.         <div>
  40.             <!-- 5-2便利新闻数据生成新闻列表的内容 -->
  41.             <div v-for="(v,i) in listall">
  42.                 <!-- 4-2通过点击router-link 来进行路由传参的数据发送 -->
  44.                 <router-link :to="{name:'details',params:{id:v.id}}">
  45.                     <h1>{
  46.    {v.title}}</h1>
  47.                 </router-link>
  48.             </div>
  49.         </div>
  50.     </template>
  51.     <template id="temc">
  52.         <div>
  53.             详情
  54.             <!-- 4-3在指定的魔板中进行路由传参的数据测试 -->
  55.             {
  56.    {this.$route.params.id}}
  57.             <h1>{
  58.    {text[0].title}}</h1>
  59.             <p>{
  60.    {text[0].con}}</p>
  61.         </div>
  62.     </template>
  63.     <template id="temd">
  64.         <div>
  65.             登录
  66.         </div>
  67.     </template>
  68.     <!-- 创建一级路由模板end -->
  70.     <template id="topnavtem">
  71.         <div>
  72.             <span v-for="(v, i) in obj">
  73.                 <router-link :to="v.linkurl">{
  74.    {v.title}}</router-link>  
  75.             </span>
  76.         </div>
  77.     </template>     
  78. </body>
  79. </html>
  80. <script src="node_modules/vue/dist/vue.js"></script>
  81. <script src="node_modules/vue-router/dist/vue-router.js"></script>
  82. <script>    
  83.     //创建一级路由组件start
  84.     const tema={template:"#tema"};
  85.     const temb={
  86.                     template:"#temb",
  87.                     data(){
  88.                         return {
  89.                             // 5.1设置详情数据
  90.                             listall:[
  91.                                 {id:1,title:"路由传参和路由卫士",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100126580"},
  92.                                 {id:2,title:"逆向传值与路由",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100109285"},
  93.                                 {id:3,title:"Vue组件",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100046528"},
  94.                                 {id:4,title:"交互与实例的生命周期",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100025112"}
  95.                             ]
  96.                         }
  97.                     }
  98.                 };
  99.     const temc={
  100.                     template:"#temc",
  101.                     data(){
  102.                         return {
  103.                             // 5.1设置详情数据
  104.                             listall:[
  105.                                 {id:1,title:"路由传参和路由卫士",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100126580"},
  106.                                 {id:2,title:"逆向传值与路由",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100109285"},
  107.                                 {id:3,title:"Vue组件",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100046528"},
  108.                                 {id:4,title:"交互与实例的生命周期",con:"本文链接：https://blog.csdn.net/qq_39200185/article/details/100025112"}
  109.                             ],
  110.                             text:[]
  111.                         }
  112.                     },
  113.                     // 新闻列表点击之后会给详情页面发送一个id 详情页面根据这个id找出对应的数据展示在页面中 
  114.                     created(){
  115.                         // 5-3因为新闻列表页面跳转到当前新闻详情页面的时候 会把id传递过来
  116.                         console.log(this.$route.params.id);
  117.                         // 当前的数据.filter进行过滤
  118.                         this.text= this.listall.filter((v,i)=>{
  119.                         //    判断 路由传参传递过来的数据 如果等于 数据中原油的内容 
  120.                             if(v.id==this.$route.params.id){
  121.                                 // 取出相关的内容   并且返回给提前准备好的变量  在页面中展示
  122.                                 return this.listall[i]
  123.                             }
  124.                         })
  125.                     }   
  126.                 };
  127.     const temd={template:"#temd"};
  128.     //创建一级路由组件end
  130.     const routes=[
  131.         {name:"index",path:"/index",component:tema},
  132.         {name:"list",path:"/list",component:temb},
  133.          // 4-1 设置路由传参的数据名
  134.         {name:"details",path:"/details/:id",component:temc},
  135.         {name:"login",path:"/login",component:temd},
  136.     ]
  138.     const router = new VueRouter({
  139.         routes
  140.     })
  142.     router.beforeEach((to,from,next)=>{
  143.         if(to.path=="/index"){
  144.             alert("您没有登录");
  145.             next("/login")
  146.         }else{
  147.             next()
  148.         }
  149.     })
  151.     new Vue({
  152.         el:"#demodiv",
  153.         router,
  154.         data:{
  155.             arr:[
  156.                 {linkurl:"/index",title:"首页"},
  157.                 {linkurl:"/list",title:"列表"},
  158.                 {linkurl:"/details",title:"详情"},
  159.                 {linkurl:"/login",title:"登录"}
  160.             ]
  161.         }, 
  162.         components:{
  163.             "topnav":{
  164.                 template:"#topnavtem",
  165.                 // 5-3详见props     obj
  166.                 props:{
  167.                     obj:{
  168.                         type:Array,
  169.                         required:true
  170.                     }
  171.                 }
  172.             }
  173.         }
  174.     })
  175. </script>

发表评论

表情：
评论列表 （有 0 条评论，614人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VueRouter路由传参

    1. 前言 本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 195 阅读

    相关 vue-03-路由-路由传参

    和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

    男娘i男娘i/ 0 赞/ 104 阅读

    相关 Vue路由跳转+路由传参

    之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。 比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。 而常见的写法就是： locat

    骑猪看日落骑猪看日落/ 0 赞/ 748 阅读