四. Vue路由Router
2019-10-11 本文已影响0人
任未然
一. 概述
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
1.1 安装
npm install vue-router --save
1.2 配置路由信息
新建一个文件夹叫做router，然后在里面定义一个index.js文件，在该文件中配置路由信息：
工程结构
index.js文件
import Vue from "vue"
import Router from 'vue-router'
import About from "../views/About";
// 延迟加载，只有当用户点到该路由的时候才去加载
const Home = () => import('../views/UserList')
const UserDetail = () => import('../views/home/UserDetail')
const Login = () => import('../views/Login')
const Index = () => import('../views/Index')
Vue.use(Router)
Vue.use(VueCookies)
const router = new Router({
// 激活的路由的样式
linkActiveClass: 'active-router',
// 路径的展示方式
mode: 'history',
routes: [
{
path: '/login', //登录的组件
component: Login
},
{
path: '/index', //首页组件
component: Index,
redirect: '/home',
children: [
{
path: '/home/:id?',
component: Home,
props: true,
children: [
{
path: '/home/user/:userId',
component: UserDetail,
props: true
}
]
},
{
path: '/about',
component: About
},
]
},
{
path: '/', // 当用户访问localhost:8080的时候，会重定向到 /home
redirect: '/index'
}
]
});
export default router
1.4 访问与渲染
1.4.1 使用<router-link>标签设置路径，to属性设置路由路径：
例: index.vue
<template>
<div>
<div class="nav navbar-inverse" style="height: 50px;"></div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<ul>
<li>
<router-link to="/home">员工管理</router-link>
</li>
<li>
<router-link to="/about">公司管理</router-link>
</li>
</ul>
</div>
<div class="col-xs-10">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.container-fluid .row ul>li>a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
.container-fluid .row ul>li>a.active-router {
color: #fff;
}
</style>
1.4.2 使用<router-view>标签，将对应的路由组件设置到这个标签当中：
App.vue
<template>
<!--
App.vue作为一个入口组件，要渲染不同的页面
-->
<router-view></router-view>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
1.5 子路由
在路由的配置中使用children来配置子路由。
children: [
{
path: '/home/user',
component: UserDetail
}
]
1.6 参数的传递
在使用路由的过程中，经常会碰到路由参数的传递，那么传递方式大概有三种。
方式一：
路由配置：
{path:'/user/:id', component:userDetail, props:true}
路由请求:
<router-link :to="'/user/' + user.id">{{user.name}}</router-link>
取值:
在userDetail中使用 props: {id: String} 来接收数据
方式二:
路由配置：
{path:'/user/:userId', props: true, component:userDetail}
//在userId后加?,表示该该参数为0或1个 例: {path:'/user/:userId?', props: true, component:userDetail}
路由请求:
<router-link :to="`/user/${user.id}`">{{user.name}}</router-link>
取值：
props: {
userId: String
},
watch:{
监听路由的变化
//$route: function(val) {
// let userId = val.params.userId;
//},
监听userId的变化
userId: function(newVal) {
this.getUserInfo(newVal);
}
}
方式三：
路由配置：
{path:'/user', name:'userDetail', component:userDetail}
路由请求:
<router-link :to="{path:'/user', query:{id:user.id}}">{{user.name}}</router-link>
取值：
mounted() {
this.id = this.$route.query.id; //用户刷新的时候有用
},
watch:{ //监听路由的变化
$route: {
handler(val) {
this.id = val.query.id;
}
}
}
1.7 编程式路由
方式一：
实现跳转：
this.$router.push({
path: '/user',
query: {id:id}
});
取值：
mounted() {
this.id = this.$route.query.id;
},
watch:{
$route: {
handler(val) {
this.id = val.query.id;
}
}
}
方式二：
实现跳转：
this.$router.push({
path: '/user',
query: {id:id}
});
取值：
props: {
id: String
}
1.8 路由守卫
1.8.1全局路由守卫
router.beforeEach((to,from,next) =>{
next();
});
1.8.2 局部路由守卫
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
示例: 全局路由守卫,检测token
index.js
import Vue from "vue"
import Router from 'vue-router'
// import Home from "../views/Home";
import About from "../views/About";
import VueCookies from 'vue-cookies'
// 延迟加载，只有当用户点到该路由的时候才去加载
const Home = () => import('../views/UserList')
const UserDetail = () => import('../views/home/UserDetail')
const Login = () => import('../views/Login')
const Index = () => import('../views/Index')
Vue.use(Router)
Vue.use(VueCookies)
const router = new Router({
// 激活的路由的样式
linkActiveClass: 'active-router',
// 路径的展示方式
mode: 'history',
routes: [
{
path: '/login', //登录的组件
component: Login
},
{
path: '/index', //首页组件
component: Index,
redirect: '/home',
children: [
{
path: '/home/:id?',
component: Home,
props: true,
children: [
{
path: '/home/user/:userId',
component: UserDetail,
props: true
}
]
},
{
path: '/about',
component: About
},
]
},
{
path: '/', // 当用户访问localhost:8080的时候，会重定向到 /home
redirect: '/index'
}
]
});
/**
* 全局路由守卫
* beforeEach() 当用户进入到任何一个路由，都会进入到该代码中，相当java中过滤器。
* to: 到哪里去 http://localhost:8080/login
* from: 从哪里来。
* next: 做跳转用。
*/
router.beforeEach((to, from, next) => {
/**
* 1. 如果用户本身就是去 /login这个组件，就放他过
* 2. 如果用户登录过，直接放用户过，判断用户是否登录过的标准是：是否包含有token信息。
* 3. 我们将用户在登录后获取到的token放入的cookie中。
* 4. 子模块通过this.$cookies.set('token', token); //设置token到cookie中
*/
if(to.path.indexOf('login') > -1 || VueCookies.get("token")) {
next(); //接着往后走
}else {
next({path: '/login'}); //让用户的请求到登录页面
// this.$route.push()
}
});
export default router
