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.html
props: false,
beforeEnter: (to, from, next) => { // 路由独享守卫 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
console.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;
}
}
};