动态路由的配置

动态路由

• Vue:不同页面之间的传递参数--params
• 在嵌套vue-router情况下，不同页面之间传递参数可以通过params实现。而params传参分为两种情况：

1.参数在url中显示

首先你要确定自己要传的参数，并在控制路由的文件中的Router中path内添加对应的字段如：

{
              path: '/news/inform/:id',
              // 通知公告
              component: r =>
                require.ensure(
                  [],
                  () => r(require('../pages/children/news/inform.vue')),
                  'web_1-2'
                )
            }

我要传的参数是id。
在你要跳转的组件内定义参数，如：

data(){
    return:id: ''

• 同时在页面中引入它们，通过router-link跳转（也可以通过点击事件，this.$router.push()跳转）,插入对应的字段。注意：如果参数个数不同，将不会出现预期效果！

<router-link :to="{path:'/inform/'+this.id+'}"><button>goto paramsUrl</button></router-link>

• 通过点击事件就这样。由于我的内容是for循环数据出来的，所以接收和传的都是id

Goinform (id) {
      alert(id)
      this.id = id  这里也可以不赋值，直接把循环出来的id拿过来拼接也可以
      this.$router.push('./inform/' + this.id)
    }

当然，你也可以通过this.$route.params.name来获取参数

2.通过name避免在url显示

• 通过上面的介绍，相信你也看出来相对应的弊端~不安全。如果用户篡改url中的参数，将会出现我们不想看到的问题。那么如何避免呢？---name

上边对Router中的操作只是改了 path,现在我们在添加一个name参数。

{
　　path: '/param',
   name: 'param',
   component: param
},

这里我们通过点击事件进行跳转~

<button @click="goParam">go to param</button>

• 在methods中编写方法

goParam:function(){
    this.$router.push({name:'param',params:this.stu})
}

动态路由的配置

原文：https://www.cnblogs.com/zly430/p/10869349.html