vue-route 嵌套路由
2019-06-25 15:44
141 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43854764/article/details/93624606
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <router-link to='/count'>come</router-link> <h3>这是count组件</h3> <router-view></router-view> </div> <template id="count"> <div> <!--嵌套路由--> <router-link to='/count/login'>登录</router-link> <router-link to='/count/register'>注册</router-link> <router-view></router-view> </div> </template> <script> var count = { template: '#count' } var login={ template:'<h3>登录组件</h3>' } var register={ template:'<h3>注册组件<h3>' } var route = new VueRouter({ routes: [ {path: '/count', component: count, children:[{path:'login', component:login} ,{path:'register', component:register}] }] }) var vu = new Vue({ el: '#app', data: {}, methods: {}, comments: {}, router: route }) </script> </body> </html>
相关文章推荐
- [问题探讨]VUE导航守卫beforeRouteLeave实现路由跳转拦截
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue嵌套路由--params传递参数
- vue路由插件之vue-route
- vue路由嵌套
- vue 嵌套路由例子
- vue beforeRouteEnter 路由取不到值
- vue移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由,返回到自己指定的路由
- Vue实现路由跳转和嵌套
- Vue之路由的嵌套
- vue-router: 嵌套路由
- vue-router:嵌套路由的使用方法
- Vue-router嵌套路由的使用
- vue嵌套路由-query传递参数(三)
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- Vue-4 路由的配置和调用,命名路由和命名视图,嵌套路由,重定向和别名
- vue 路由嵌套
- vue之路由的嵌套(父子路由)
- vue-route+webpack部署单页路由项目,访问刷新出现404问题