门户网站建设招标,网站备案 加急,一起来做网站17,建设什么网站赚钱vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序#xff0c;当你要把 vue-router 添加进来#xff0c;我们需要做的是#xff0c;将组件(components)映射到路由(routes)#xff0c;然后告诉 vue-router 在哪…vue路由知识整理
对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序当你要把 vue-router 添加进来我们需要做的是将组件(components)映射到路由(routes)然后告诉 vue-router 在哪里渲染它们。参考文章
https://router.vuejs.org/zh-c...动态配置路由
HTML lt;pgt;lt;!-- query要用path来引入params要用name来引入,故不能写为 :to{path:/login,params: {isLogin: true}} --gt;lt;!-- 跳转路由时用this.$router: this.$router.push({name:login,params:{isLogin:true}});this.$router.push({path: /login, query: {isLogin : true}}); --gt;lt;!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --gt;lt;router-link :to{name:login,params: {isLogin: true}}gt;亲请登录lt;/router-linkgt;lt;router-link :to{name:login,params: {isLogin: false}}gt;免费注册lt;/router-linkgt;lt;/pgt;lt;!-- 路由出口, 路由匹配到的组件将渲染在这里 --gt;lt;router-viewgt;lt;/router-viewgt;
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,// 命名路由通过一个名称来标识一个路由显得更方便一些特别是在链接一个路由// 使用lt;router-link :to{ name: main, params: { userId: 123 }}gt;Userlt;/router-linkgt; 或者 router.push({ name: main, params: { userId: 123 }})name: home,component: home,meta: { // 路由元信息keepAlive: false,auth: false,title: 主页},// 如果 props: true 被设置为 trueroute.params 将会被设置为组件属性// 路由组件传参 https://router.vuejs.org/zh-cn/essentials/passing-props.htmlprops: false,beforeEnter: (to, from, next) gt; { // 路由独享守卫 https://router.vuejs.org/zh-cn/advanced/navigation-guards.htmlconsole.log(beforeEnter);next();}},{path: /login,name: login,component: login,meta: {keepAlive: false, // 用于在 lt;keep-alivegt; 中使用判断是否需要进行缓存auth: false, // 判断是否需要进行登录校验title: 登录 /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */}},{path: *, /* 默认跳转到登录界面 */redirect: {path: /login}}],// lt;router-link to/bar#anchorgt;/bar#anchorlt;/router-linkgt;// 可以通过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) gt; { // 异步滚动setTimeout(() gt; {resolve({x: 0, y: 0});}, 500);});}}
});router.beforeEach((to, from, next) gt; {// 注册一个全局前置守卫if (to.matched.some(m gt; 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而不是$routerif (this.$route.params.isLogin ! undefined) {this.isLogin this.$route.params.isLogin;}}
};
原文地址https://segmentfault.com/a/1190000012801479
更多专业前端知识请上
【猿2048】www.mk2048.com
