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

Posted join-ZH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-router 2.0 常用基础知识点之router-link相关的知识,希望对你有一定的参考价值。

1,$route.params

类型: Object
一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
path: ‘/detail/:id‘ 动态路径参数 以冒号开头

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

还可以在一个路由中设置多段『路径参数』,对应的值都会设置到 $route.params 中

1个参数

模式: /user/:username
匹配路径: /user/evan
$route.params:{ username: ‘evan‘ }

多个参数

模式: /user/:username/post/:post_id
匹配路径:/user/evan/post/123
$route.params:{ username: ‘evan‘, post_id: 123 }

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:
const User = {
  template: ‘...‘,
  watch: {
    ‘$route‘ (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者像下面这样,只要$route发生变化,就可以做某事:

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来取到参数

2,$route.query

类型: Object
一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

// 动态数据的查询参数
  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>

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

// 举个例子
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();
});

4,append

设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

<router-link :to="{path:‘/coupon/detail/‘+item.order_id, append:‘true‘}"></router-link>

如果上面这个路由是从home页面跳转过来,得到的结果就是/home/coupon/detail/id

5,active-class

类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

<router-link tag="li" :to="{path:‘/home‘, activeClass: ‘bottom-nav-active‘}"></router-link>

7,综合案例

// 命名路由,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>
 

以上是关于vue-router 2.0 常用基础知识点之router-link的主要内容,如果未能解决你的问题,请参考以下文章

转:vue-router 2.0 常用基础知识点之router.push()

(转) vue-router 2.0 常用基础知识点之router.push()

vue.js项目构建之vue-router2.0的使用

Vue-router路由基础总结

Vue 2.0入门基础知识之全局API

vue打包部署(含2.0)