文档章节

vueRouter-动态路由匹配

tianyawhl
 tianyawhl
发布于 2017/09/12 09:33
字数 562
阅读 3
收藏 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
粉丝 2
博文 220
码字总数 112357
作品 0
常州
前端工程师
私信 提问
VueRouter 源码深度解析

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

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

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

B_Cornelius
02/06
0
0
详解vue-router 初始化时做了什么

vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤: 引入 vue-router: 利用 vue 的插件机制...

peakedness丶
昨天
0
0
解密vue-router: 从源码开始

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

玩弄心里的鬼
05/08
0
0
Vue中路由管理器Vue Router使用方式(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router 2.在main.js中引用并使用VueRouter 3.定义路由,创建路由实例 4.注册路由实例 二、Vue Router基础使用示例 1.App.vue 页面定义,使用rou...

tianma3798
10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue.js 3.0 新特性预览

Evan You(尤雨溪)(2018年11月16日)前几日的早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。 利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。...

我的卡
13分钟前
1
0
Mybatis自带连接池阅读

1、数据源初始化,初始化入口由SqlSessionFactoryBuilder.build(InputStream inputStream, String environment, Properties properties)方法提供 public SqlSessionFactory build(InputStre......

jcc_codingBoy
19分钟前
1
0
Oracle 数据库勒索病毒 RushQL 处理办法

Oracle 数据库勒索病毒 RushQL 处理办法 办法来自Oracle 官方: https://blogs.oracle.com/cnsupport_news/%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A%84%E2%80%9C%E6%AF%94%E7%89%B9%E5%......

rootliu
20分钟前
2
0
聊聊flink LocalEnvironment的execute方法

序 本文主要研究一下flink LocalEnvironment的execute方法 实例 final ExecutionEnvironment env = ExecutionEnvironment.getExecutionEnvironment(); DataSet<RecordDto>......

go4it
22分钟前
1
0
Spring Boot中对自然语言处理工具包hanlp的调用详解

概 述 HanLP 是基于 Java开发的 NLP工具包,由一系列模型与算法组成,目标是普及自然语言处理在生产环境中的应用。而且 HanLP具备功能完善、性能高效、架构清晰、语料时新、可自定义的特点,...

左手的倒影
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部