Vue-Router
Vu-router是Vue.js的官方路由管理器,方便于构建页面,在我们的使用过程中,一般是在router的index.js文件中配置对应的组件和对应的路径
主要的功能
- 嵌套路由
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 视图过度效果
- 细粒度的导航控制
核心文件
router中的index.js文件
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件,命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定义路由配置
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
}
]
})
使用
在入口文件(main.js)中注入router
// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
// 定义实例
new Vue({
el: '#app',
router, // 注入框架中,其实在注入状态管理的时候也是这个路子
components: { App },
template: '<App/>'
})
页面跳转
router-link标签跳转
<p>导航 :
<router-link to="/">首页</router-link>
<router-link to="/hello">hello</router-link>
</p>
编程式导航-JS代码内部跳转
this.$router.push('/xxx')
<button @click="goHome">回到首页</button>
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}
其他方法
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
子路由-路由器嵌套
子路由,也叫路由器嵌套,采用在children后跟路由数组实现
//Home.vue
<template>
<div>
<router-view />
<ul>
<li>
<router-link :to="{name:'list'}">待办事项</router-link>
</li>
<li>
<router-link :to="{name:'add'}">个人中心</router-link>
</li>
</ul>
</div>
</template>
//router->index.js
const routes = [{
path: '/home',
name: 'home',
component: Home,
children: [{
path: 'list',
name: 'list',
component: () => import( /* webpackChunkName: "list" */ '../views/List.vue')
}, {
path: 'user',
name: 'user',
component: () => import( /* webpackChunkName: "user" */ '../views/User.vue')
}, ]
},
]
路由传递参数
- 通过router-link标签中的to传参
就如同上面的通过to传递参数到达对应的子路由 - url中传递参数
//以冒号的形式传递参数 router->index.js
{
path:'/home/two/:id/:name', // 子页面2
component:Two
}
//接收参数 在vue组件中书写
<p>ID:{{ $route.params.id}}</p>
<p>名称:{{ $route.params.name}}</p>
//路由跳转,在src/components/Home.vue中添加
<router-link to="/home/two/1/张三">子页面2</router-link>
//特殊规则下加入正则表达式
{
path:'/home/two/:id(\d+)/:name', // 子页面2
component:Two
}
- 编程式导航-params传递参数
- 编程式导航-query传递参数
命名路由-命名视图-重定向-别名
-
命名路由
给定路由一个唯一的名称,然后调转调用这个路由:
在index.js中配置路由属性,在组件页面中调用 -
命名视图
在同一个页面展示多个视图,如果不用嵌套的话,只能通过命名视图来实现了,
//src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 创建页面组件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 主页路由
components: {
default: Header,
a: Left,
b: Right
}
}
]
})
//src/app.vue
<template>
<div id="app">
<router-view />
<router-view name="a" class="left" />
<router-view name="b" class="right" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
命名视图只能放在最顶级的页面中
- 重定向
通过在router中配置关键词redirect来实现的
//src/router.index.js
export default new Router({
routes: [
{
path: '/', // 默认页面重定向到主页
redirect: '/home' // 重定向
},
{
path: '/home', // 主页路由
component: Home,
children:[ // 嵌套子路由
{
path:'/home/two/:id/:name', // 子页面2
component:Two
},
{
path:'/home/three/:id/:name', // 子页面3
name: 'three', // 路由名称-命名路由
redirect: '/home/two/:id/:name' // 重定向-传递参数
},
]
}
]
})
//src/components/Home.vue
<router-link to="/">首页</router-link> |
<router-link to="/home/two/1/lisi">子页面2</router-link> |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">子页面3</router-link>
- 别名
别名是通过router的配置中的alias来实现的
//src/router/index.js
{
path:'/one', // 子页面1
component:One,
alias: '/oneother'
}
//src/components/Home.vue
<router-link to="/oneother">子页面1</router-link>
redirect和alias的区别
redirect:直接改变了url的值,把url变成了真实的path路径。
alias:url路径没有别改变,这种更友好,让用户知道自己访问的路径,只是改变了
-
mode与404
-
路由钩子
路由钩子(导航钩子),也就是路由拦截器 -
全局钩子常用
//src/route/index.js
// 定义路由配置
const router = new VueRouter({ ... })
// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
// 这里可以加入全局登陆判断
// 继续执行
next();
});
// 全局后置钩子-常用于结束动画等
router.afterEach(() => {
//不接受next
});
export default router;
每个钩子方法接收三个参数:
to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 继续执行函数
- 路由单独钩子
//src/router/index.js
{
path:'/home/one', // 子页面1
component: One,
// 路由内钩子
beforeEnter: (to, from, next) => {
console.log('进入前执行');
next();
}
}
- 组件内钩子
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
},
// 进入页面前调用
beforeRouteEnter(to, from, next) {
console.log('进入enter路由钩子')
next()
},
// 离开页面调用
beforeRouteLeave(to,from, next){
console.log('进入leave路由钩子')
next()
},
// 页面路由改变时调用
beforeRouteUpdate(to, from, next) {
console.log('进入update路由钩子')
console.log(to.params.id)
next()
}
}
</script>
- 路由懒加载
- 正常模式
// 1、先引入页面组件
import Home from '@/components/Home'
// 2、使用组件
{
path: '/home',
component: Home
}
2.懒加载模式
提高了页面初始化的效率
component: (resolve) => require(['@/components/One'], resolve)
component: () => import('@/components/Two')
components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')