路由重定向|| 嵌套路由用法

路由重定向

路由重定向指的是：用户在访问地址 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>

路由重定向|| 嵌套路由用法相关推荐

Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
vue 子路由如何激活父路由_vue嵌套路由（父子路由）
配置父子路由关系,A.vue和B.vue是Main.vue的子组件: { path: '/main/', name: 'main', component: () => import('compo ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
vue-router之嵌套路由
❤记在前面 "自己"这个东西是看不见的,撞上一些别的什么,反弹回来,才会了解自己. 跟很强的东西.可怕的东西.水准很高的东西相碰撞,才知道"自己"是什么,这才是 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
3、vue-路由、拦截器和嵌套路由
这里写目录标题一.路由 (1)路由的配置 (2)路由的概念 1.路由的概念 ①参考链接 ②路由的使用第一步-创建组件第二步-配置router.js 第三步-配置main.js 2.路由的生命周期 ...
vue嵌套路由，二级路由使用介绍
vue-router 嵌套路由,二级子路由项目中如果都是一级路由,路由管理会有些乱.嵌套路由是路由中包含路由的意思,组件中可以有自己的路由导航和路由容器(router-link.router-vie ...
Electron-vue第一章：创建和自动生成嵌套路由
# 安装 vue-cli 和脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project# 安装依赖并运 ...
vue路由重定向和动态路由
vue路由重定向和动态路由文章目录 vue路由重定向和动态路由 vue路由重定向动态路由 vue路由重定向实现页面跳转一般有两种方式:重定向页面和转发页面. 重定向页面的具体实现方式就是更改页面 ...

路由重定向|| 嵌套路由用法

路由重定向

嵌套路由用法

路由重定向|| 嵌套路由用法相关推荐

最新文章

热门文章