13518219792
网站建设资讯

NEWS

网站建设资讯

vue-router2.0常用基础知识点之router-link的示例分析

这篇文章给大家分享的是有关vue-router 2.0 常用基础知识点之router-link的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

乐安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

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.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) {
     // ...
    })
  },
 }

// 使用
验证抵扣券

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

复制代码 代码如下:


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

5，active-class

类型: string

默认值: "router-link-active"

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

复制代码 代码如下:


7，综合案例

// 命名路由，append 属性，查询参数，router-link渲染成
  • 标签



// to的值：字符串形式


// to的值：对象形式，拼接多个动态参数


// to的值：对象形式
返回首页

// to的值：对象形式，拼接动态参数


// to的值：对象形式，带一个路径参数

    • 感谢各位的阅读！关于“vue-router 2.0 常用基础知识点之router-link的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


    分享文章：vue-router2.0常用基础知识点之router-link的示例分析
    标题路径：http://cdweb.net/article/gidgcg.html

    其他资讯