本文只要介绍vue-router基本用法与常见的问题
一、vue-router插件的安装
使用 npm:
$ cnpm install vue-router二、vue-router插件的引用
出于页面的优雅考虑，使用vue2.0 vue-cli脚手架的代码风格去实现。
1、创建引用文件：
用ide打开项目文件，在src目录下创建文件夹router，后在文件夹内创建index.js。如图：
2.编写引用的相关代码：
step1： router文件夹下的index.js：
/*引入Vue框架*/
import Vue from 'vue';
/*引入资源请求插件*/
import Router from 'vue-router';
/*使用router插件*/
Vue.use(Router);
export default({
});~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
拓展router-link： 以下是路由的一些知识点的应用，包含组件懒加载、自定义组件的引用、嵌套路由的使用，可以选择跳过，直接看step2
1-1 router文件夹下的index.js：
/*引入Vue框架*/
import Vue from 'vue';
/*引入资源请求插件*/
import Router from 'vue-router';
import goods from '@/components/goods/goods';//注：goods是某个定义的组件，在components新建goods文件夹，创建goods.vue文件，而后在template内div输入‘我是商品’(可自定义)下列的seller、discuss、profile、UserProfile类似
import seller from '@/components/seller/seller';
import discuss from '@/components/discuss/discuss';
import userCenter from '@/components/userCenter/userCenter';//这是嵌套路由页面，请看特别备注
import profile from '@/components/profile/profile';
import UserProfile from '@/components/userCenter/profile';
/*使用router插件*/
Vue.use(Router);
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Posts = resolve => require(['../components/goods/goods'], resolve);//懒加载,
import goods from '@/components/goods/goods';//此方法与上述懒加载的效果一样Posts===goods
const routes =[];
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
export default new Router({
mode: 'history',
// 关键在这里，设置afterEach钩子函数
routes: [
{
path: '/', redirect: { name: 'goods' },//初始重定向加载页面，此处的‘/’是让页面加载进来的第一个页面是goods的内容
},
{ path: '/goods', name: 'goods', component: goods,
},
{ path: '/seller', name: 'seller', component: seller,
},
{ path: '/discuss', name: 'discuss', component: discuss,
},
//此处是路由的嵌套
{ path: '/userCenter',
name: 'userCenter',
component: userCenter,
children: [
{ path: '/UserProfile', name: 'UserProfile', component: UserProfile },
{ path: '/Posts', name: 'Posts', component: Posts },
{ path: '/profile', name: 'profile', component: profile }
]
}
],
});1-2 goods文件夹下的 goods.vue：
<template>
<div class="goods">
我是商品
</div>
</template>
<script>
export default {
name: "goods"
}
</script>
<style lang="stylus">
</style>1-3 userCenter文件夹下的userCenter：
<template>
<div>
<div class="userCenter">
我是用户中心
</div>
<div class="tab">
<!--<router-link to="/userCenter" class="tab-item">Go to user</router-link>-->
<router-link to="/UserProfile" class="tab-item">Go to profile</router-link>
<router-link to="/Posts" class="tab-item">Go to Posts</router-link>
<router-link to="/profile" class="tab-item">Go to profile</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
// 对象
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
#app
.tab
display flex
width 100%
height 40px
line-height 40px
.tab-item
flex 1
text-align center
overflow hidden
text-overflow ellipsis
white-space nowrap
</style>
相关结构图如下：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
step2： src下的main.js，代码引入已经引用好的vue-route文件：
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});tip：如果代码没有反应，请用cmd进入到项目目录，$cnpm run dev。
step3： App.vue页面的路由请求
<template>
<div id="app">
<div class="header">
i am header
</div>
<div class="tab">
<div class="tab-item">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="goods" class="tab-item">goods</router-link>
</div>
<div class="tab-item">
<router-link to="/seller" class="tab-item">seller</router-link>
</div>
<div class="tab-item">
<router-link to="/discuss" class="tab-item">discuss</router-link>
</div>
</div>
<div class="tab">
<router-link to="/Posts" class="tab-item">Go to Posts</router-link>
<router-link to="/profile" class="tab-item">Go to profile</router-link>
</div>
<div class="tab">
<router-link to="/userCenter" class="tab-item">Go to user</router-link>
<router-link to="/UserProfile" class="tab-item">Go to UserProfile</router-link>
</div>
<router-view class="view two" name="goods"></router-view>
<router-view class="view three" name="seller"></router-view>
<router-link :to="{ name: 'userCenter'}">userCenter</router-link>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>图2-1 运行的效果如下图：
图2-2 嵌套路由页面操作如下图：
至此，你已经能运用vue-router成功调用自定义组件了。