Vue项目脚手架架搭建-Vue Router路由管理

---

一、介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易>如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

二、安装

vue-cli在创建项目时有询问是否创建vue-router，如果选了Y，vue-cli已经将路由安装好了,可以直接跳过安装和引入，直接去配置组件；如果选了N，执行

npm install vue-router

三、路由配置

安装好之后，在router文件夹下的index.js中引入vue和vue-router

import Vue from 'vue'
import Router from 'vue-router'

引用并判断vue-router插件是否安装

Vue.use(Router)

添加路由组件

import NavGoods from 'components/NavGoods/NavGoods.vue';
import NavRatings from 'components/NavRatings/NavRatings.vue';
import NavSeller from 'components/NavSeller/NavSeller.vue';

创建路由对象

export default new Router({
	routes: [{
			path: '/goods',
			component: NavGoods
		},
		{
			path: '/ratings',
			component: NavRatings
		},
		{
			path: '/seller',
			component: NavSeller
		},
	],
});

四、路由引入

安装配置完成就可以直接将路由引入到当前vue实例去检测了，在main.js中引入router

import router from './router'

再将router加到当前Vue实例中

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

五、调用路由

vue-router提供了跳转链接组件router-link和显示内容组件router-view，调用方法如下：

<router-link to="/pathName">link-name</router-link>
<router-view />

修改App.vue文件的template即可点击查看切换效果

<template>
  <div id="app">
    <router-link to="/goods">商品</router-link>
    <router-link to="/ratings">评论</router-link>
    <router-link to="/seller">商家</router-link>
    <router-view/>
  </div>
</template>