一、介绍
引用Vue Router官方的话来说:
Vue router 是 Vue.js官方提供的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
二、Vue Router的安装步骤
分为两种情况:
1. 项目初始搭建时:
vue-cli2及以上,可以选择安装vue-router模块,脚手架会帮助我们安装并初始配置好路由基本功能,如下图:
vue-cli2的安装方式:
vue-cli3及以上的安装方式:
2. 项目中没有路由功能时:
① 首先通过 npm install vue-router --save 命令安装vue-router模块
npm install vue-router --save
② 在src目录下新建router文件夹,router文件夹下新建index.js文件,目录结构如下:
③ 在index.js文件中导入 vue 和 vue-router 模块,如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
④ 使用 Vue.use(VueRouter) 安装插件
Vue.use(VueRouter)
⑤ 创建 VueRouter 实例,在实例中我们就可以配置相关的路由规则,最后使用 export default router 导出,以便在main.js文件中导入配置好的路由功能并使用;index.js文件中具体代码如下:
// 导入 vue 和 vue-router 模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入首页模块,以便在项目第一次启动时显示内容,后期可根据自己需求修改或者删除
import Home from '../views/Home.vue'
// 使用Vue.use(VueRouter)来安装插件;
Vue.use(VueRouter)
// 配置相关路有规则,这里把它抽离了出来
const routes = [
{
// 页面首次加载时,路由重定向
path: '',
redirect: '/home'
},
{
// 主页路由规则
path: '/home',
name: 'Home',
component: Home,
children: [
{
path: '',
redirect: 'findmusic'
},
{
path: 'findmusic',
// 使用路由懒加载方式
component: () => import("@/views/findmusic/findmusic"),
children: [
{
path: '',
redirect: 'recommend'
},
{
path: 'recommend',
component: () => import("@/views/findmusicpages/recommend")
}
]
},
{
path: 'friend',
component: () => import("@/views/friend/friend")
}
]
}
]
// 创建VueRouter对象
const router = new VueRouter({
routes,
// 为处于活跃状态下的路由添加样式
linkActiveClass: 'active-class',
// 用来设置路由的解析模式,是hash还是history
mode: 'hash'
})
export default router
⑥ 在 main.js文件中导入
扫描二维码关注公众号,回复:
11886274 查看本文章
import router from './router'
//记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
new Vue({
router,
render: h => h(App)
}).$mount('#app')