本文主要是介绍vue学习十三(VueRouter起步、动态路由参数匹配、获取、监测变化(测试无效))，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 起步
- 动态路由参数匹配
- 动态路由参数获取
- 响应路由参数的变化(测试失败)
起步
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
路由中有三个基本的概念 route, routes, router。
1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
路由的步骤：
- 定义 (路由) 组件。
- 定义路由
- 创建 router 实例，然后传
routes配置 - 创建和挂载根实例。
<body><div id="box"><router-link to="/one">One</router-link><router-link to="/two">Two</router-link><router-view></router-view></div><script>//1、定义 (路由) 模版组件const Foo = { template: '<div>第一个router</div>' }const Bar = { template: '<div>第二个router</div>' }//2、定义路由var routes = [{path: "/one",component: Foo},{path: "/two",component: Bar},];// 3、创建 router 实例var router = new VueRouter({routes});// 4、创建和挂载根实例const app = new Vue({router}).$mount('#box')</script>
效果如下：
当然我们也可以将路由模板，放在html块，如下
<body><div id="box"><router-link to="/one">One</router-link><router-link to="/two">Two</router-link><router-view></router-view></div><!--定义模版--><template id="Foo"><div>第一个router</div></template><template id="Bar"><div>第二个router</div></template><script>//1、定义 (路由) 模版组件//2、定义路由var routes = [{path: "/one",component: { template: "#Foo" }},{path: "/two",component: { template: "#Bar" }},];// 3、创建 router 实例var router = new VueRouter({routes});// 4、创建和挂载根实例const app = new Vue({router}).$mount('#box')</script>
</body>
动态路由参数匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
上面的例子我们，可以修改如下地方代码，其他的无需修改：
<div id="box"><router-link to="/one/1">One</router-link><router-link to="/two/2">Two</router-link><router-view></router-view></div>
var routes = [{path: "/one/:id",component: { template: "#Foo" }},{path: "/two/:id",component: { template: "#Bar" }},];
测试效果如下：
file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1
One Two
第一个router
file:///Users/zhiliao/zhiliao/vue/index_test.html#/two/2
One Two
第二个router
动态路由参数获取
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID
我们在原来的例子基础上修改如下部分，其他的无需变动
<template id="Foo"><div>第一个router{{$route.params.id}}</div></template><template id="Bar"><div>第二个router{{$route.params.id}}</div></template>
测试效果如下：
file:///Users/zhiliao/zhiliao/vue/index_test.html#/two/2
One Two
第二个router 2
file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1
One Two
第一个router 1
响应路由参数的变化(测试失败)
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
const User = {template: '...',watch: {'$route' (to, from) {// 对路由变化作出响应...}}
}
或者
const User = {template: '...',beforeRouteUpdate (to, from, next) {// react to route changes...// don't forget to call next()}
}
不过我测试是失败的，没有得到响应，以下是我的代码：
<body><div id="box"><router-link to="/one">One</router-link><router-link to="/two">Two</router-link><router-view></router-view></div><script>//1、定义 (路由) 模版组件const Foo = {template: '<div>第一个router</div>',watch: {$route (to, from) {// 对路由变化作出响应...console.info("sfsfs")}}}const Bar = {template: '<div>第二个router</div>',watch: {$route (to, from) {// 对路由变化作出响应...console.info("werwer")}}}//2、定义路由var routes = [{path: "/one",component: Foo},{path: "/two",component: Bar},];// 3、创建 router 实例var router = new VueRouter({routes});// 4、创建和挂载根实例const app = new Vue({router}).$mount('#box')</script></body>
这篇关于vue学习十三(VueRouter起步、动态路由参数匹配、获取、监测变化(测试无效))的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
