vue路由总结

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

vue-router, vue自带的路由，下面是一些简单的操作说明：

一、安装

1、cnpm install vue-router --save 命令进行安装

2、在main.js或者使用vue-router的地方，通过import 来导入import vRouter from 'vue-router'

3、Vue.use(vRouter )

4、开始配置路由

import Vue from 'vue'
import App from './App'
import VRouter from 'vue-router'
import Apple from './components/apple'
import Banana from './components/banana'
import Redapple from './components/redapple'
//使用vue.use来注册使用VRouter插件
Vue.use(VRouter);
//这样VRouter作为一个类来使用，我们自己实例化这样的一个类
let router = new VRouter({
mode: 'history',
routes: [
{
path: '/apple/:color',//为页面设置路由参数
component: Apple,
//路由嵌套
children: [
{
path: 'redapple',
component: Redapple 注意：在路径上加上‘/’表示从根目录开始跳转
不加‘/’表示从当前页面进行跳转
},
{
path:'/redapple',
component: Redapple
}
]
},
{
path: '/banana',
component: Banana
}
]
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//将这样的router放到根目录里面
// es6 通过render方法来使用外部引入的App组件
render: h => h(App)
})

二、常用的路由方式

1、常规的路由

1 var routes = [
2 {
3 path:"/one",
4
5 component: a
6 },
7 {
8 path:"/two",
9 component: b
10 },
11 ]

2、嵌套路由

routes: [
13 {
14 path: '/apple',
15 component: Apple,
16 //路由嵌套
17 children: [
18 {
19 path: 'redapple',
20 component: Redapple 注意：在路径上加上‘/’表示从根目录开始跳转
21 不加‘/’表示从当前页面进行跳转
23 },
{
path:'/redapple',
component: Redapple
}
24 ]

3、动态路由，一般适用于详情页

{
path:"/two:id",
component: b
}

4、路由跳转的方式与传参，适合写入一些方法中：

a、 router.push(location)

// 字符串
router.push('home') // 对象
router.push({path: 'home'}) // 命名的路由
router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数，变成 /register?plan=private
router.push ({ path: 'register', query: { plan: 'private' }})

b、标签跳转，其中传参的方式和上面的一样

<router-link :to="{ name: 'one'}">User</router-link>
<router-link :to="{ name: 'two'}">User</router-link>

5、路由的重定向

重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其它位置，用于网站调整或网页被移到一个新地址，它也是通过routes配置来完成，下面例子是从/a 重定向到 /b, 如果a 找不到，直接跳到b:

var router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})

6、路由的别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。简单的说就是给 /a 起了一个外号叫做 /b ,但是本质上还是 /a。适合页面的推广：

var router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})

7、路由中props传递

{
path: '/personal/:id',
name: 'personal',
component: personal,
props: true // 这一步非常重要
}

页面中会直接被渲染出来

三、常用的路由方法

1、返回上一页，一个全局的goBack 事件

Router.prototype.goBack = function() {
window.history.go(-1)
}

// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3步记录
router.go(3) // 如果history 记录不够用，那就默默地的失败呗
router.go(-100)
router.go(100)

2、router.replace()

类型: boolean
默认值: false
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
/加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写：
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)

3、需要先跳转到登录的页面

将登录收的token存在localstory中。

4、路由过渡效果（App.vue）

<template>
<div id="app" class="app">
<transition :name='transitionName'>
<router-view class="child-view"></router-view>
</transition>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
data: 'abcd',
info: 'nono',
transitionName: 'slide-left'
}
},
19 watch: {
20 '$route' (to, from) {
21 const toDepth = to.path.split('/').length
22 const fromDepth = from.path.split('/').length
23 this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
24 }
25 },
// 判断左右滑动
beforeCreate () {
console.log('创建前……')
console.log(this.data)
console.log(this.$el)
},
// created () {
// console.log('已创建……')
// console.log(this.info)
// console.log(this.data)
// },
// beforeMount () {
// console.log('mounted之前……')
// console.log(this.info)
// console.log(this.$el)
// },
// mounted () {
// console.log('mounted……')
// console.log(this.info)
// console.log(this.$el)
// },
// beforeUpdate () {
// console.log('更新前========')
// },
// updated () {
// console.log('更新完成')
// },
// beforeDestroy () {
// console.log('销毁前……')
// console.log(this.info)
// console.log(this.$el)
// },
destroyed () {
console.log('已销毁……')
console.log(this.info)
console.log(this.$el)
},
beforeRouteUpdate (to, from, next) {
let isBack = this.$router.isBack
if (isBack) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
}
</script> <style>
@import "./common/css/reset.css";
.app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #000;
font-size:.14rem;
height:2rem;
}
.child-view {
position: absolute;
width:100%;
transition: all .8s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
} .slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
</style>

5、路由的封装

import Vue from 'vue'
import Router from 'vue-router'
import {storage} from '../assets/js/utils/storage'
import routeConfig from './route.config.json';
var registerRoute = (routeConfig) => {
let route = [];
routeConfig.map(pages => {
route.push({
path: pages.path,
name: pages.name !== undefined ? pages.name : null,
redirect: pages.redirect !== undefined ? pages.redirect : null,
component: require(`@/pages${pages.component}`).default,
meta: pages.meta !== undefined ? pages.meta : null,
children: pages.children !== undefined ? registerRoute(pages.children) : null
})
}); return route;
}; var route = registerRoute(routeConfig); Vue.use(Router) Router.prototype.goBack = function() {
this.isBack = true
window.history.go(-1)
} const routeInstance = new Router({
routes: route
}) routeInstance.beforeEach((to, from, next) => {
if (to.path !== '/') {
let familyId = storage.cookie.get('familyId');
if ((familyId !== null)) {
next()
} else {
routeInstance.replace({path: '/'})
}
}
next()
}) export default routeInstance