Vue--嵌套路由-多层级关系-to="/account/login"---路由子组件children: [],--保留父组件的内容
2023-09-11 14:18:36 时间
<!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> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <template id="tmpl"> <div> <h1>这是 Account 组件</h1> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view> </div> </template> <script> // 组件的模板对象 var account = { template: '#tmpl' } var login = { template: '<h3>登录</h3>' } var register = { template: '<h3>注册</h3>' } var router = new VueRouter({ routes: [ { path: '/account', component: account, // 使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,否则永远以根路径开始请求,这样不方便我们用户去理解URL地址 children: [ { path: 'login', component: login }, { path: 'register', component: register } ] } // { path: '/account/login', component: login }, // { path: '/account/register', component: register } ] }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router }); </script> </body> </html>
相关文章
- (尚043) vue_向路由组件传递数据+vue param和query两种传参方式
- Vue Router 路由实现原理实现原理
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- vue - 路由传递参数
- vue@2.6.14小目标列表
- 【Vue】通过keep-alive实现路由组件的数据缓存
- Vue创建一个路由项目(Vue Router)
- Vue——详解MVVM模型在vue中的使用
- 针对Vue相同路由不同参数的刷新问题
- Vue--watch控制监听路由地址-组件的变化----'$route.path': function (newVal, oldVal)
- Vue--路由的基本使用(组件之间的跳转)new VueRouter---配置path和子组件---跳转路径带#<a href="#/register">---显示区域用<router-view>
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- Vue+Echarts监控大屏实例九:智慧园区监控模板实例上
- vue组件级路由钩子函数介绍,及实际应用
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- Vue脚手架(vue-cli)搭建和目录结构详解
- vue基础八(路由组件)
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Vue学习第32天——缓存路由组件keep-alive的用法及路由组件独有的2个生命周期函数
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第13天——vue中使用自定义插件
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想
- Vue路由使用的几个注意点