Vue-router

purpleduck 发布于1月前 •最后由 ryanhall89天前回复 阅读192次
1 条评论

Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。下面是个基本例子:

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

定义路由


// 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. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

router-link

<router-link> 组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 a 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

to

表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

注意:别忘了to前面的冒号。

replace

类型: boolean

默认值: false

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace:true></router-link>

tag

有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们可以指定何种标签,同样它还是会监听点击,触发导航。

<router-link to="/foo" tag="li">foo</router-link>

active-class

上面说了被选中的router-link将自动添加一个class属性值:router-link-active,这个属性就是来修改这个class值的。

当前点击的还有添加一个:router-link-exact-active

router-view

这个组件十分关键,它就是用来渲染匹配到的路由的。
可以配合<keep-alive>使用,keep-alive可以缓存数据,这样不至于重新渲染路由组件的时候,之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后,点击进入另一个路由组件b,再回到路由组件a的时候之前的DOM操作还保存在,如果不加keep-alive再回到路由组件a时,之前的DOM操作就没有了,得重新进行。如果你的应用里有一个购物车组件,就需要用到keep-alive。

<transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
</transition>

路由信息对象

一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)。

route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。

route object 出现在多个地方:

① 组件内的 this.$route 和 $route watcher 回调(监测变化处理)

② router.match(location) 的返回值

③ 导航钩子的参数:

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
})

④ scrollBehavior 方法的参数:

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // to 和 from 都是 路由信息对象
  }
})

路由信息对象的属性

$route.path

类型: string

字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。

$route.params

类型: Object
一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。

$route.query

类型: Object

一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

$route.hash

类型: string

当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。

$route.fullPath

类型: string

完成解析后的 URL,包含查询参数和 hash 的完整路径。

$route.matched

类型: Array<RouteRecord>
一个数组,包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本(还有在 children 数组)。

$route.name

当前路由的名称,如果有的话。

查看原文: Vue-router

  • lazysnake
  • redkoala
  • crazypanda
  • orangebutterfly
  • brownpanda
  • ticklishfrog
  • whitekoala
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。