文档章节

vueRouter-动态路由匹配

tianyawhl
 tianyawhl
发布于 2017/09/12 09:33
字数 562
阅读 4
收藏 0

我们经常需要把某种模式匹配到的所有路由,全都映射到同一个组件,例如,我们有一个User组件,对于所有ID各不相同的用户,都要使用这个组件来渲染,那么我们可以在vue-router的路由路径中使用动态路径参数(dynamic segment)来达到这个效果

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    //id 代表user下一级别的文字
    //{{$route.params.id}}显示foo11 或者 bar11,即点击foo时显示foo11,点击bar显示bar11
    </script>
</body>

现在呢,像 /user/foo11 和 /user/bar11 都将映射到相同的路由。

你可以在一个路由中设置多段路径参数,对应的值都会设置到$route.params中,例如
模式 /user/:username              匹配路径 /user/evan               $route.params   {username:"evan"}
模式/user/:username/post/:post_id   匹配路径 /user/evan/post/123  $route.params {username:"evan",post_id:123}
除了$route.params外,$route对象还提供了其它有用的信息,例如,$route.query(如果URL中有查询参数)、$route.hash等等
响应路由参数的变化,提醒一下,当使用路由参数时,例如从/user/foo导航到user/bar,原来的组件实例会被复用,因为2个路由都渲染同一个组件,比起销毁再创建,复用则显得更加高效,不过,这也意味着组件的生命周期钩子不会再被调用,复用组件时,想对路由参数的变化做出响应的话,你可以简单的watch(监测变化)$route对象

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`,
        watch:{
            "$route" (){
                alert(this.$route.params.id)
            }
        }
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>



<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`,
        watch: {
            "$route": "doSomething"
        },
        methods: {
            doSomething: function() {
                alert(this.$route.params.id)
            }
        }
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 4
博文 231
码字总数 118197
作品 0
常州
前端工程师
私信 提问
VueRouter 源码深度解析

该文章内容节选自团队的开源项目 InterviewMap。项目目前内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等内容,无论是基础还是进阶,亦或是源码解读,你都能...

夕阳
2018/10/28
0
0
vue-router源码阅读学习

如同分析vuex源码我们首先通过一个简单例子进行了解vue-router是如何使用的,然后在分析在源码中是如何实现的 示例 下面示例来自于example/basica/app.js 首先调用Vue.use(VueRouter),Vue.us...

B_Cornelius
2018/02/06
0
0
解析Vue-router相关干货及工作原理

本文主要介绍了vue-router相关基础知识及单页面应用的工作原理,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 单页面工作原理是...

前端攻城小牛
2018/12/13
0
0
解析Vue-router相关基础知识及工作原理

这篇文章主要介绍了vue-router相关基础知识及单页面应用的工作原理,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 当你要把 vue-...

前端攻城老湿
2018/12/27
0
0
解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
2018/05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面理解Java内存模型(JMM)及volatile关键字

理解Java内存区域与Java内存模型 Java内存区域 Java虚拟机在运行程序时会把其自动管理的内存划分为以上几个区域,每个区域都有的用途以及创建销毁的时机,其中蓝色部分代表的是所有线程共享的...

亭子happy
10分钟前
0
0
Prometheus监控mysql实例--centos7安装mysql_exporter

目录 概述 环境准备 普罗米修斯简介 mysql安装 mysqld_exporter安装 启动参数列表 概述 prometheus(普罗米修斯) 是一个开源系统监控和报警工具包,许多公司和组织都采用了Prometheus,该项目...

java_龙
15分钟前
3
0
拥有2000家门店,他如何晋升为服装界的新宠?

摘要: —— iwarm3.0加热组件、碳纳米管膜炎、管状石墨结构体...你看到并不是一款高科技电子产品,这是快鱼服饰在这个冬天推出的黑科技产品 - 智能温控羽绒服。 在竞争激烈的服装行业,快鱼...

阿里云云栖社区
18分钟前
0
0
不忘初心 砥砺前行-智和信通2018年年会报道

1月18日,智和信通以“不忘初心 砥砺前行”为主题的2018总结会议暨2019年年会在京召开。年会以总经理李少龙的讲话为开场,充分肯定了全体员工2018年的工作和成绩,并表达了公司产品智和网管平...

智和网管平台
26分钟前
0
0
NGINX api网关

以谁为师
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部