文档章节

vueRouter-动态路由匹配

tianyawhl
 tianyawhl
发布于 2017/09/12 09:33
字数 562
阅读 3
收藏 0
点赞 0
评论 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
粉丝 1
博文 195
码字总数 92486
作品 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的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
05/08
0
0
vue-router 基本使用

 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => a...

为了美好的明天
05/01
0
0
前端路由简介以及vue-router实现原理

后端路由简介 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 ...

muwoo
06/01
0
0
Vue.js构建项目笔记2:vuejs+vue-router

一.使用vue文件 继续1的学习,我们知道使用: 可以把.vue文件的内容解析成组件对象的形式: 解析类似如下: 我们使用es6的语法,把render的回调处理参数使用这种处理: 显示正常: 二.组件使...

透笔度
2017/10/19
0
0
前端路由探究(1) vue-router源码学习-基本数据结构

搭建实验环境 首先github download下来https://github.com/vuejs/vue-router vue-router最新的代码,代码在src下,结构清晰,但不适合调试看中间的一些处理结果,所以新建一个文件夹,新建i...

Kurset
2017/12/09
0
0
Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁
04/16
0
0
vue 路由的使用

vue路由的使用 ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传...

龙之天空
2016/12/02
37
0
vue-router 子路由动态路由,没有效果,求帮忙!

router.js const routes = [ ]; //路由跳转 const router = new VueRouter({ }); 点击按钮进行路由跳转的代码 var result = JSON.parse(JSON.stringify(item)); result.id = result.cprogram......

哈雷路亚
2017/08/09
43
0
vue-router 地址切换视图不切换

在使用vue-router做路由的时候,在切换视图时,地址栏发生了变化而视图缺无法切换,也没有什么报错提示,看文档,再次认真看文档还是不明白为什么。 最后发现在定义路由时,将routes数组写成...

小昭归来
2016/12/19
14
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx upstream 负载均衡

Nginx upstream 负载均衡 了了情空 关注 2016.05.31 16:16* 字数 612 阅读 537评论 1喜欢 0 上周五同事跟我提一个需求,大概描述是酱紫:“我们现在终端都在访问同一台服务器,如果流量过大造...

linjin200
4分钟前
0
0
Dubbo 源码解读——自定义 Classloader 之 ExtensionLoader

众所周知,Dubbo 是阿里巴巴公司自主研发开源的一个高性能的服务框架(现已捐献给 Apache 基金会组织),应用之间可以通过 RPC 的方式来互相调用并返回结果。主要基于 Java 语言开发,它提供...

Ryan-瑞恩
11分钟前
0
0
Sonar Maven/IDEA集成(未完待续)

前言:在上一篇(SonarQube安装步骤)的基础上,我们来集成maven/IDEA 1.首先是集成maven(maven的安装配置就不多说了) 找到maven安装目录下-conf文件夹-setting.xml文件 然后添加以下配置信...

张艺兴女朋友
11分钟前
0
0
JVM的内存区域划分

JVM的内存区域划分   学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆、栈以及静态数据区。那么在Java语言当中,内存又是如何划分的...

yzbty23
12分钟前
0
0
mysql 日期查询

MYSQL查询今天、昨天、7天前、30天、本月数据今天:SELECT * FROM 表名 WHERE TO_DAYS( 时间字段名) = TO_DAYS(NOW());昨天:SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) ...

evil_01
19分钟前
0
0
RuntimeError - [Xcodeproj] Unknown object version

在创建新工程,使用cocoaPods下载第三方库时,报如下的错: 报这个错,是因为xcode工程版本Deployment Target 和工程project format不匹配造成的,因此需要调整这两个配置一致,处理这个问题...

奋斗的青春年华
32分钟前
0
0
java中modbus协议连接

modbus在java中的使用,首先maven的pom中引入modbus4j包 <dependency><groupId>com.infiniteautomation</groupId> <artifactId>modbus4j</artifactId> <version>3.0.3......

江湖鱼大虾
34分钟前
0
0
Java单例的常见形式

Java单例的常见形式 本文目的:总结Java中的单例模式 本文定位:学习笔记 学习过程记录,加深理解,便于回顾。也希望能给学习的同学一些灵感 一、非延迟加载单例类 public class Singleton {...

lichuangnk
36分钟前
1
0
微信小程序接口报错47001的解决方法

使用微信小程序码的生成接口,发现死活都报47001错误。 有人提到是urlencode的问题,不能使用urlencode。 修改了代码,可以了。代码贴出来: import urllib.requestimport urllib.parse...

乐_然
39分钟前
0
0
6、Git安装

1、下载地址: https://git-scm.com/ 2、下载完成后安装,安装路径自己选择,其他的选项参照下图: 其他的一步一步往下即可,最后Finish完成安装; 3、配置github的ssh密钥: (1)打开Git Bas...

丑陋的皮囊
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部