乐趣区

关于vue-router:Vue-Router-初探一

jiezi

Vue Router 作用：
将组件 (components) 映射到路由 (routes)，而后通知 Vue Router 在哪里渲染它们。

router-link
应用 router-link 组件来导航，通过传入 to 属性指定链接.

<router-link to="/foo">Go to Foo</router-link>

官网解释：<router-link> 组件反对用户在具备路由性能的利用中 (点击) 导航。通过 to 属性指定指标地址，默认渲染成带有正确链接的 标签
链接：https://router.vuejs.org/zh/a…

router-view
通过 router-view 将对应路由匹配到的组件进行渲染。简言之，router-view 能够定制你的路由组件显示的地位

<router-view></router-view>

官网解释：<router-view> 组件是一个 functional 组件，渲染门路匹配到的视图组件。<router-view> 渲染的组件还能够内嵌本人的 <router-view>，依据嵌套门路，渲染嵌套组件。
链接：https://router.vuejs.org/zh/a…

路由注入：
1. 定义路由组件（组件具体内容）
组件名须要与路由定义的中央一样，不便路由查找对应组件

const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}

2. 定义路由匹配的组件
路由数组，个别由 门路 与 组件 组成一个对照表

const routes = [{ path: '/foo', component: Foo},
  {path: '/bar', component: Bar}
]

3. 创立路由实例🌰

const router = new VueRouter({routes // 还能够传别的配置参数})

4. 挂载路由到根实例

const app = new Vue({router   // 要通过 router 配置参数注入路由})

挂载完就能够应用啦

this.$router
通过注入路由器，咱们能够在任何组件内通过 this.$router 拜访路由器，也能够通过 this.$route 拜访以后路由。

this.$route.params.xxx  // xxx 是你以后页面路由的一个参数

动静路由匹配
这里我只列举几个最罕用的：

对于路由 /foo?user=1，则 $route.query.user === 1

this.$route.query

获取以后路由门路：

this.$route.path

获取以后路由冒号后的参数值：

this.$route.params

以后路由 (带 #) 的 hash 值：

$route.hash

更多 API 详见：https://router.vuejs.org/zh/a…

响应路由参数的变动
从 /user/foo 导航到 /user/bar，原来的组件实例会被复用，而无需销毁再创立。这也意味着组件的生命周期钩子不会再被调用

若想对路由参数的变动作出响应：
1. 能够简略地 watch (监测变动) $route 对象：

watch: {$route(to, from) {// 对路由变动作出响应...}
  }

2. 应用导航守卫

beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()}

to: Route: 行将要进入的指标 路由对象;
from: Route: 以后导航正要来到的路由;
next: Function: 该办法用来 resolve 这个钩子（肯定要调用）
详见：https://router.vuejs.org/zh/g…

捕捉所有路由 /404
惯例参数下只会匹配被 / 分隔的 URL。匹配任意门路，应用通配符 (*)

{path: '*'  // 会匹配所有门路}
{path: '/user-*'   // 会匹配以 `/user-` 结尾的任意门路}
  • 路由 {path: ‘*’} 通常用于客户端 404 谬误

同一个门路能够匹配多个路由，路由定义得越早，优先级就越高。

退出移动版