vuejs之【router-link】大全(一)

vuejs之【router-link】大全(一)

1

我们在使用vue做单页面应用难免会用到vue-router，那把项目中的经常用到方法整理一下，方便日后查找与回顾。

1.$route.params

一个 key/value 对象，如果没有路由参数，就是一个空对象。

格式：path: '/detail/:id' 动态路径参数 以冒号开头。

1 2 3

const routes = [  {path: '/detail/:id', component: Detail, name: 'detail', meta: {title: ''}}, ];

一个参数时：

格式： /user/:username

1	$route.params：{ username: 'evan' }

多个参数时：

格式：/user/:username/post/:post_id

1	$route.params：{ username: 'evan', post_id: 123 }

复用组件时，可以使用watch监听$route 对象

1 2 3 4 5

watch: {  '$route' (to, from) {   // 对路由变化作出响应...  }  }

或者用这种方式，只要$route发生变化，就可以做某事：　

1 2 3 4 5 6 7

watch: {      // 如果路由有变化，会再次执行该方法  '    $route': 'doSomeThing'  },  methods: {      doSomeThing(){}  }

案例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。 // 可以通过this.$route.params.id来取上动态的id <router-link :to="{path: '/detail/' + this.$route.params.id}" > 此团详情 </router-link>    // 还可以用命名路由的方式： <router-link :to="{ name: 'detail', params:{ id: this.$route.params.id }}" > 此团详情 </router-link>    // 还可以用router.push()的方式 router.push({name:'detail', params: { id: this.$route.params.id}})    // 以上三种方式都可以实现跳转，都可以通过this.$route.params来取到参数

2.$route.query

对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

用法

1	<router-link :to="{ path: '/backend/verify_coupon', query:this.queryData }">验证抵扣券</router-link>

3定义路由的时候可以配置 meta 字段

案例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 定义路由的时候在meta中加入自定义字段 const routes = [  {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}},  {path: '/start', component: Start, name: 'start', meta: {isNeedAuth: false, title: '活动现场'}}, ]; const router = new VueRouter({...}); router.beforeEach((to, from, next) => {  // 动态修改页面的title  setTitleHack(to.meta.title);   // 根据自定义的路由元信息来做判断：  if (to.meta.isNeedAuth !== false) {   // do something  } else {   // do something  }  next(); });

 综合案例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 命名路由，append 属性，查询参数，router-link渲染成<li>标签 <router-link tag="li" :to="{name:'demandindex', append:true, query: {isFormBackend: 1}, activeClass: 'bottom-nav-active'}"> </router-link>    // to的值：字符串形式 <router-link to="banner.image_url" ></router-link>    // to的值：对象形式，拼接多个动态参数 <router-link :to="{path: '/my/modify?modify=fullname&val=' + profile.nickname}" ></router-link>    // to的值：对象形式 <router-link :to="{path: '/home'}">返回首页</router-link>    // to的值：对象形式，拼接动态参数 <router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'?order_status='+product.order_status}"></router-link>    // to的值：对象形式，带一个路径参数 <router-link :to="{path: '/detail/' + this.$route.params.id}" ></router-link>

　　https://www.cnblogs.com/Abner5/p/7756607.html