Libx

Vue全家桶之Vue-router

Word count: 1,529Reading time: 6 min
2017/08/11 Share

我认为现在的webapp之所以能成为app除了其日益丰富的功能之外,强大的路由功能也是极其重要的一个组成部分。

暑期留校总结<二>——Vue-router

开始自然还是从官方文档开始上车了~文档地址在此

和Vue一样,Vue-router也可直接引入CDN即可使用,但是这显然并不是真正开发中的使用场景。

当然还是需要使用我们的老伙计npm来安装一波:
npm install vue-router

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

import Vue from 'vue' import VueRouter from 'vue-router'
Vue.use(VueRouter)

如果使用全局的 script 标签,则无须如此(手动安装)。

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们
<div id="app"></div>
<h1>Hello App!</h1>;
<p>;
<router-link to="/foo">;Go to Foo</router-link>;
<router-link to="/bar">;Go to Bar</router-link>;
</p>;
<router-view>;</router-view>;
</div>;

vue中 使用 router-link 组件来导航. 通过传入 to 属性指定链接. <router-link>; 默认会被渲染成一个 &lt;a&gt; 标签 ,当然你也可以自定义tag属性为span,div等

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

对应的js是这样编写的:

const Foo = { template: '&lt;div&gt;foo&lt;/div&gt;' }
const Bar = { template: '&lt;div&gt;bar&lt;/div&gt;' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
const app = new Vue({
router
}).$mount('#app')

0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)

1. 定义(路由)组件。 可以从其他文件 import 进来

2. 定义路由 // 每个路由应该映射一个组件。 其中”component” 可以是 通过 Vue.extend() 创建的组件构造器, 或者,只是一个组件配置对象。

3. 创建 router 实例,然后传 routes 配置

4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, 从而让整个应用都有路由功能

现在,应用已经启动了!

嵌套路由:

对于嵌套路由:vue1.0和2.0的写法是不同的,其实我觉得相比只下1.0的甚至比2.0要简单一些,也可能并不是。。。

router-view中是可以嵌套router-view的,这也就构成了嵌套

我们来看一下2.0中嵌套路由的写法

{ path: '/user', component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}

编程式导航:

说实话,编程式导航,我用的并不多,,也就是使用router.go()

在这里也系统的复习一下:
除了使用 <router-link></router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 &lt;router-link&gt; 时,这个方法会在内部调用,所以说,点击 &lt;router-link :to="..."&gt; 等同于调用 router.push(...)














声明式编程式
&lt;router-link :to="..."&gt;router.push(...)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
<span class="hljs-comment">// 字符串</span>
router.push(<span class="hljs-string">'home'</span>)

<span class="hljs-comment">// 对象</span>
router.push({ path: <span class="hljs-string">'home'</span})

<span class="hljs-comment">// 命名的路由</span>
router.push({ name: <span class="hljs-string">'user'</span>, params: { userId: <span class="hljs-number">123</span}})

<span class="hljs-comment">// 带查询参数,变成 /register?plan=private</span>
router.push({ path: <span class="hljs-string">'register'</span>, query: { plan: <span class="hljs-string">'private'</span}})


#### router.replace(location)

router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。













声明式编程式
&lt;router-link :to="..." replace&gt;router.replace(...)

router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)

例子

// 在浏览器记录中前进一步,等同于 history.forward()</span>
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

操作 History

你也许注意到 router.pushrouter.replacerouter.gowindow.history.pushStatewindow.history.replaceStatewindow.history.go好像, 实际上它们确实是效仿 window.history API 的。

因此,如果你已经熟悉 Browser History APIs,那么在 vue-router 中操作 history 就是超级简单的。

还有值得提及的,vue-router 的导航方法 (pushreplacego) 在各类路由模式(historyhashabstract)下表现一致。

数据的加载:

既然我们用路由来实现不同页面之间的跳转,不同页面的数据自然又一个加载的过程,这个过程有两种处理方案:

  • 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
  • 导航完成之前获取:导航完成前,在路由的 enter 钩子中获取数据,在数据获取成功后执行导航。个人比较认同第一项,因为在跳转到新页面之后,如果用户网络不佳,你可以使用一个加载动画来提示用户:hey,你的网有问题,不是我们应用的问题,但是如果你是用第二种解决方案的话,如果用户的网络不佳,他会首先认为你的应用有问题,在他点击了跳转之后并没有跳转,在等了好久之后又突然跳转。。这是个不理智的方法。。。
    先到这里。
CATALOG
  1. 1. 暑期留校总结<二>——Vue-router
    1. 1.1. 嵌套路由:
    2. 1.2. 编程式导航:
      1. 1.2.1. router.push(location)
      2. 1.2.2. router.go(n)
      3. 1.2.3. 操作 History
    3. 1.3. 数据的加载: