Vue学习笔记 —— vue-router

路由的概念

路由的本质是一种个对应关系，比如说在URL中输入要访问的url地址之后，浏览器要去请求这个地址对应的资源。

为什么要使用路由？

vue单文件应用，所以一般a标签跳转不再使用。这个时候我们需要借助vue-router插件来实现Vue组件之间的跳转。

vue-router安装

cnpm install vue-router --save npm install vue-router --save

1、重定向

重定向通过 routes 配置来完成，重定向的目标可以是路径，已命名的路由，或者是一个方法

const router = new Router({ routes: [ { path: '/a', redirect: '/b' } ] } const router = new Router({ routes: [ //一个命名的路由 { path: '/a', redirect: { name: 'c' }} ] } const router = new Router({ routes: [ //一个方法，动态返回 { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 return '/home' }} ] }

其中方法接收目标路由作为参数，return 重定向的 字符串路径/路径对象。

2、别名

什么是别名？ /a 的别名是 /b，意味着当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

作用：别名可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

比如，处理首页访问时，常常将index设置为别名，比如将’/home’的别名设置为’/index’。

但是，要注意的是，的样式在URL为/index时并不会显示。因为，router-link只识别出了home，而无法识别index

3、根路径

设置根路径，将path设置为’/’

<p> <router-link to="/">index</router-link> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> const routes = [ { path: '/', component: Home }, { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, ]

但是，由于默认使用的是全包含匹配，即’/foo’、’/bar’也可以匹配到’/’，如果需要精确匹配，仅仅匹配’/’，则需要在router-link中设置exact属性

<p> <router-link to="/" exact>index</router-link> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> const routes = [ { path: '/', component: Home }, { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, ]

4、命名路由

通过一个名称来标识一个路由，在创建Router实例时，通过routes配置给某个路由设置名称。

作用：命名路由的常见用途是替换router-link中的to属性，如果不使用命名路由，由router-link中的to属性需要设置全路径，不够灵活，且修改时较麻烦。使用命名路由，只需要使用包含name属性的对象即可。

但是，如果设置了默认子路由，则不要在父级路由上设置name属性。

const router = new Router({ routes: [ { path: '/user/:Id', name: 'userId', component: A } ] })

链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'userId', params: { Id: 123 }}">User</router-link>

router.push() 中也可以使用命名路由：

router.push({ name: 'userId', params: { Id: 123 }})

5、命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

如果 router-view 没有设置名字，那么默认为 default，代码如下：

<router-view class="one"></router-view> <router-view class="two" name="a"></router-view> <router-view class="three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。通过components选项配置。

const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })

6、动态路由

基本概念：根据不同的路径，显示不同的内容。在 vue-router 的路由路径中使用动态路径参数来达到这个效果。

const A= { template: '<div>A</div>' } const router = new VueRouter({ routes: [ // 动态路径参数以冒号开头 { path: '/user/:id', component: A} ] })

如上代码所示，/user/foo 和 /user/bar 都将映射到相同的路由。

如何设置路由参数？

通过query配置

<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>

通过params配置

<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>

在配置路由的时候需要给参数留个坑，代码如下：

const router = new VueRouter({ routes: [ //通过params传递的路由参数需要用 :参数名 来占坑 { name: 'register', path: '/register/:name', component: Register} ] })

如何获取路由参数？

通过query配置的

this.$route.query

通过params配置的

this.$route.params

响应路由参数的变化

使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。

不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，可以用 watch监测 $route 对象，代码如下：

const User = { template: '...', watch: { '$route' (to, from) { // } } }

Vue路由-详细总结