Vue2.0上手教程（二）— Vue 路由的使用（Vue-Router2）教程

Admin

52
文章

6
评论

2017年11月29日16:32:20 评论 8,255 2901字阅读9分40秒

用 Vue.js + vue-router 创建单页应用，是非常简单的，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。Vue2.0 有一个配合度很高的路由插件，就是 Vue-Router 2，但是 Vue-Router@2.x 只适用于 Vue2.x 版本，其他的 0.7.x 版本文档可以去这里查看。

一、安装 Vue-Router 路由

如果你是使用 Vue脚手架（Vue-cli）搭建的项目，那么你在使用 vue init webpack demo 命令创建项目的同时，可以直接选择安装 vue-router，或者你也可以单独使用命令 npm install vue-router 的方式来安装。本教程使用的 Vue-Router 是在创建项目的同时已经选择安装好了，如果不会使用 Vue 脚手架来搭建项目，可以参考上一篇文章来学习。

二、配置 Vue-Router 路由

1、在 main.js中安装路由插件

import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
Vue.use(Router)

2、定义路由组件，如果路由组件比较多的话，也可以路由组件单独写成一个router.js文件，然后在引入到main.js中

import Home from '../components/home.vue'
import Page1 from '../components/page1.vue'
import Page2 from '../components/page2.vue'
import Page3 from '../components/page3.vue'

3、定义路由

const routes = [
{path: '/',redirect: '/home'}, // 重定向路由设置，这样进/ 就会跳转到/home
{path: '/home',component: Home,},
{path: '/page1',component: Page1,},
{path: '/page2',component: Page2},
{path: '/page3',component: Page3}
]

4、创建router实例

const router = new Router({
routes
})

5、创建和挂载根实例

const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')

经过上面的配置之后，路由匹配到的组件将会渲染到 App.vue 里的 <router-view></router-view> 中
默认的 App.vue 里应该是：

<template>
<div id="app">
<router-view></router-view>
</div>
</template>

默认的 index.html 里应该是：

<body>
<div id="app"></div>
</body>

这样就会把渲染出来的页面挂载到这个id为app的div里了。

三、路由 Vue-Router 嵌套

const routes = [ { path: '/home', component: home,
children: [ { path: 'page', component: page} ]
}]

这样通过 /home/page 就可以访问到 page 的页面了。

四、路由 Vue-Router 懒加载

const routes = [
{ path: '/home', component: resolve => require(['./home.vue'], resolve) },
{ path: '/page', component: resolve => require(['./page.vue'], resolve) },
]

通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

五、路由导航 <router-link>

1、声明式导航
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)

<router-link to="home">Home</router-link>
<a href="home">Home</a>
<router-link v-bind:to="'home'">Home</router-link>
<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>
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2、编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router.push(location, onComplete?, onAbort?)

router.push('home')
router.push({ path: 'home' })
router.push({ name: 'user', params: { userId: 123 }})
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述中的 query 并不属于这种情况。
更详细的 vue-router 功能请参考文档：https://router.vuejs.org/zh-cn/

博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~

继续阅读

一、安装 Vue-Router 路由

二、配置 Vue-Router 路由

三、路由 Vue-Router 嵌套

四、路由 Vue-Router 懒加载

五、路由导航 <router-link>

发表评论 取消回复

发表评论取消回复