【Vue】Vue-Router2 实现路由功能

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。

在前面文章 vue-cli基础上，开始介绍。安装vue-cli时已经将vue-router安装，若还没有安装，可通过npm

npm install vue-router

一、使用路由

在main.js中，需要明确安装路由功能：

import Vue from ‘vue’

import VueRouter from ‘vue-router’

import App from ‘./App.vue’

Vue.use(VueRouter)

1.引入定义好的组件

import Compos from ‘./components/compos/compos.vue’;

import Version from ‘./components/version/version.vue’;

项目结构如下图：



2.定义路由

routes: [
{
path: '/', // 默认打开version路由（重定向）
redirect: '/version'
},
{
path: '/version',
name: 'version',
component: Version
},
{
path: '/compos',
name: 'compos',
component: Compos,
redirect: to => {
if (to.path === '/compos') {
return '/compos/ok-input';
}
},
children: [ // 子路由（参数路由）
{path: ':id', name: 'child'}
]
}
]

3.创建

router

实例，然后传

routes

配置

const router = new VueRouter({
routes,
linkActiveClass: 'active' // 路由active状态
});

4.创建和挂载根实例。通过

router

配置参数注入路由，从而让整个应用都有路由功能。

new Vue({
el: '#app',
router,
render: (h) => h(App)
});

或者可以写成

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

通过上面的配置之后，路由陪陪到的组件会将渲染到App.vue里的

<router-view><router-view>

.

//app.vue
<div>
<div class='tab'>
<div class='tab-item'>
<router-link to="/version">version</router-link>
</div>
<div class='tab-item'>
<router-link to="/compos">Compos</router-link>
</div>
</div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>

<style lang="stylus" rel="stylesheet/stylus">
@import './common/stylus/mixin.styl';
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(rgba(7, 17, 21, 0.1))
.tab-item
flex: 1
text-align: center
& > a
display: block
font-size: 14px
color: rgb(77, 85, 93)
text-decoration: none
&.active
color: rgb(240, 20, 20)
</style>

<div class='compos'>
<div class='nav'>
<div class='nav-item'>
<router-link :to="{ name: 'child', params: { id: ok-input }}">ok-input</router-link><
c76f
/span>
<router-link :to="{ name: 'child', params: { id: ok-grid }}">ok-input</router-link>
</div>
</div>
</div>

启动项目之后，我们看到的页面将是;





二、懒加载

https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码如下：

const routes = [
{
path: '/',
component: resolve => require(['./components/version/version.vue'], resolve)
},
{
path: '/compos',
component: resolve => require(['./components/compos/compos.vue'], resolve),
redirect: to => {
if (to.path === '/compos') {
return '/compos/ok-input';
}
},
children: [ // 子路由（参数路由）
{path: ':id', name: 'child'}
]
}
]

三、路由信息对象

1.

$route.path

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

2.

$route.params

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

3.

$route.query

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

4.

$route.hash

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

5.

$route.fullPath

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

6.

$route.matched

一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

综合上述，一个包含重定向、嵌套路由、懒加载的main.js如下：

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

const routs =  [
{
path: '/',
redirect: '/version',
component: resolve => require(['./components/version/version.vue'], resolve)
},
{
path: '/compos',
name: 'compos',
component: resolve => require(['./components/compos/compos.vue'], resolve),
redirect: to => {
if (to.path === '/compos') {
return '/compos/ok-input';
}
},
children: [
{path: ':id', name: 'child'}
]
},
{
path: '/version',
name: 'version',
component: resolve => require(['./components/version/version.vue'], resolve)
}
];

const router = new VueRouter({
routes,
linkActiveClass: 'active'
});

/* router.push('/version'); 可以代替初始化页面时的重定向*/
/* eslint-disable no-new */

new Vue({
el: '#app',
router,
render: (h) => h(App)
});

声明：本文步骤为转载内容，代码是本人demo，如有问题请联系。

更详细的vue-router功能请参考文档：https://router.vuejs.org/zh-cn/