vue路由知识整理

对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

参考文章

https://router.vuejs.org/zh-c...

动态配置路由

HTML

  <p><!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} --><!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --><!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --><router-link :to="{name:'login',params: {isLogin: true}}">亲，请登录</router-link><router-link :to="{name:'login',params: {isLogin: false}}">免费注册</router-link></p><!-- 路由出口, 路由匹配到的组件将渲染在这里 --><router-view></router-view>

route/index.js

import Vue from 'vue';
import Router from 'vue-router';
import login from 'pages/login/login.vue';
import home from 'pages/home/home.vue';Vue.use(Router);const router = new Router({routes: [{path: '/home',// 命名路由，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由// 使用<router-link :to="{ name: 'main', params: { userId: 123 }}">User</router-link> 或者 router.push({ name: 'main', params: { userId: 123 }})name: 'home',component: home,meta: { // 路由元信息keepAlive: false,auth: false,title: '主页'},// 如果 props: true 被设置为 true，route.params 将会被设置为组件属性// 路由组件传参 https://router.vuejs.org/zh-cn/essentials/passing-props.htmlprops: false,beforeEnter: (to, from, next) => { // 路由独享守卫 https://router.vuejs.org/zh-cn/advanced/navigation-guards.htmlconsole.log('beforeEnter');next();}},{path: '/login',name: 'login',component: login,meta: {keepAlive: false, // 用于在 <keep-alive> 中使用，判断是否需要进行缓存auth: false, // 判断是否需要进行登录校验title: '登录' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */}},{path: '*', /* 默认跳转到登录界面 */redirect: {path: '/login'}}],// <router-link to="/bar#anchor">/bar#anchor</router-link>// 可以通过selector模拟滚动到锚点的行为 { selector: string, offset? : { x: number, y: number }}scrollBehavior (to, from, savedPosition) {if (savedPosition) { // 浏览器后退/前进时savedPosition可用return savedPosition;} else if (to.hash) {return {selector: to.hash};} else {return new Promise((resolve, reject) => { // 异步滚动setTimeout(() => {resolve({x: 0, y: 0});}, 500);});}}
});router.beforeEach((to, from, next) => {// 注册一个全局前置守卫if (to.matched.some(m => m.meta.auth)) {// 判断是否需要校验var a = true;if (a) { // 获取next(); // 校验通过，正常跳转到你设置好的页面} else {next({ // 校验失败，跳转至登录界面path: '/login',query: {redirect: to.fullPath} // 将跳转的路由path作为参数，用于在登录成功后获取并跳转到该路径});}} else {next(); // 不需要校验，直接跳转}
});export default router;

login.js

export default {validator: null,data () {return {isLogin: true};},created () {// 接受路由参数，并判断是登录还是注册页面（注：是$route而不是$router）if (this.$route.params.isLogin !== undefined) {this.isLogin = this.$route.params.isLogin;}}
};

原文地址：https://segmentfault.com/a/1190000012801479

更多专业前端知识，请上 【猿2048】www.mk2048.com