详解vue-router 2.0 常用基础知识点之router-link

const routes = [
 {path: '/detail/:id', component: Detail, name: 'detail', meta: {title: ''}},
 {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}},
];

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

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

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

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

// 当匹配到一个路由时，参数值会被设置到 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来取到参数

// 动态数据的查询参数
 export default {
  data() {
   return {
    queryData: {}
   }
  },
  created() {
   this.$http.get(url)
    .then(function (response) {
     // ...
     if (data.code == 0) {
      this.queryData.order_id = data.content.order_id;
      this.queryData.business_id = data.content.business_id;
      this.queryData.coupon_id = data.content.coupons.coupon_id;
     }
     // ...
    }, function (response) {
     // ...
    })
  },
 }

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

// 举个例子
const routes = [
 {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}},
];

import { setTitleHack } from './utils';
import Activity from './views/activity.vue'
import Start from './views/start.vue'
// 定义路由的时候在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();
});

// 命名路由，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" ></router-link>

// to的值：对象形式
<router-link :to="{path: '/home'}">返回首页</router-link>

// to的值：对象形式，拼接动态参数
<router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'"></router-link>

// to的值：对象形式，带一个路径参数
<router-link :to="{path: '/detail/' + this.$route.params.id}" ></router-link>