路由重定向|| 嵌套路由用法
生活随笔
收集整理的這篇文章主要介紹了
路由重定向|| 嵌套路由用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
路由重定向
路由重定向指的是：用戶在訪問地址 A 的時候，強制用戶跳轉到地址 C ，從而展示特定的組件頁面；
通過路由規則的 redirect 屬性，指定一個新的路由地址，可以很方便地設置路由的重定向：
嵌套路由用法
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 導入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 實例所控制的區域 --><div id="app"><router-link to="/user">User</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script>const User = {template: '<h1>User 組件</h1>'}const Register = {template: `<div><h1>Register 組件</h1><hr/><router-link to="/register/tab1">tab1</router-link><router-link to="/register/tab2">tab2</router-link><router-view /><div>`}const Tab1 = {template: '<h3>tab1 子組件</h3>'}const Tab2 = {template: '<h3>tab2 子組件</h3>'}// 創建路由實例對象const router = new VueRouter({// 所有的路由規則routes: [{ path: '/', redirect: '/user'},{ path: '/user', component: User },// children 數組表示子路由規則{ path: '/register', component: Register, children: [{ path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2 }] }]})// 創建 vm 實例對象const vm = new Vue({// 指定控制的區域el: '#app',data: {},// 掛載路由實例對象// router: routerrouter})</script></body> </html>總結
以上是生活随笔為你收集整理的路由重定向|| 嵌套路由用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实现简易前端路由
- 下一篇： 动态匹配路由的基本用法||路由组件传递参