# 起步

如果在一个模块化工程中使用他,必须要通过vue.user()明确地安装路由功能

Import Vue from 'vue'
Import VueRouter from 'vue-router'
Vue.use(VueRouter)
1
2
3

如果使用全局的script标签,则无需这样.

如果在一个模块化工程中使用他,必须要通过vue.user()明确地安装路由功能

Import Vue from 'vue'
Import VueRouter from 'vue-router'
Vue.use(VueRouter)
1
2
3

如果使用全局的script标签,则无需这样. Vue-Router的功能 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于Vue过度系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS Class的链接 HTML5历史模式或hash模式,在IE9中自动降级 自定义的滚动条行为

使用routerlink组件来导航,通过传入 to 属性指定链接

router-view是路由出口,路由匹配到的组件将渲染在这里

通过注入路由器,我们可以在任何组件内通过 this.$router访问路由器

也可以通过this.$route访问当前路由

<router-link>对应的路由匹配成功,将自动设置class属性值.router-link-active


# 动态路由匹配

一种很常见的情况,需要我们把某种模式匹配的所有路由,全部映射到同一个组件。

比如文章详情页,个人中心页。

一个路径参数使用冒号:标记,当匹配到一个路由时,参数值会被设置到this.$route.params,

可以在组件内使用。

可以在一个路由中设置多段“路径参数”

/user/:username/ /user/:username/post/:postd

响应路由参数的变化

当从相同的组件跳转到相同的组件时,原来的组件会被复用,

这也意味着组件的生命周期钩子不会再被调用,意味着数据不能得到更新。

对此的两个解决方法

使用watch监听$route对象的变化

使用beforeRouteUpdate导航守卫

捕获所有路由或404路由

使用通配符*匹配任意路径

path:'*'

path:'/user-*'

含有通配符的路由应该放在最后

使用通配符时,$route内会自动添加一个名为pathMath参数

该参数包含url通过通配符被匹配的部分

高级匹配模式

待了解

匹配优先级

谁先定义的,谁的优先级就最高

# 嵌套路由

app.vue中的<router-view>是最顶层的出口,渲染最高级路由匹配的组件。

同样的,一个被渲染组件同样可以包含自己的<router-view>。要在嵌套的出口中渲染组件,需要在VueRouter的参数中使用children配置。

/开头的嵌套路径会被当做根路径,使得开发者充分的使用嵌套组件而无需设置嵌套的路径。

# 编程式的导航

除了使用<router-link>创建a标签来定义导航链接,还可以借助router的实例方法,通过编写代码来实现。

语法 router.push(location, onComplete?, onAbort?)

this.$router.push 和 router.push的不同????

当在页面上点击<router-link>时,push 方法会在内部调用,所以说,点击<router-link :to="...">等同于调用router.push(...),一个是声明式一个是编程式。

...

# 命名路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
//即多了name属性
// 在routerlink和push方法中的使用
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
1
2
3
4
5
6
7
8
9
10
11
12
13

# 命名视图

在一个页面中想要展示多个view时

# 导航守卫

导航表示路由正在发生改变。

Vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

参数或查询(query ?|version )的改变并不会触发进入/离开的导航守卫。

全局前置守卫

全局解析守卫

全局后置钩子

# 组件内的守卫

beforeRouter

beforeRouterUpdate

beforeRouteLeave

# 路由元信息

meta

# Router实现的原理

一笔写于: 5/31/2020, 1:58:36 PM
a hint