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

總結

以上是生活随笔為你收集整理的vue路由知识整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。