vue之路由的嵌套 子路由

Posted linm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue之路由的嵌套 子路由相关的知识，希望对你有一定的参考价值。

<!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="js/vue.js"></script>
  <script src="js/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">
    <router-link to=‘/‘>Account</router-link>
    <router-view></router-view>
  </div>
  <template id=‘tmp1‘>
    <div>
      <h1>这是 Account 组件</h1>
      <!-- login 和register 是account的子路由 -->
      <router-link to=‘/account/login‘>登录</router-link>
      <router-link to=‘/account/register‘>注册</router-link>
      <router-view></router-view>
    </div>
  </template>

  <script>
    //组件的模板对象
    var account = {
      template: "#tmp1"
    }
    var login={
      template:"<h3>登录</h3>"
    }
    var register={
      template:"<h3>注册</h3>"
    }
    var router = new VueRouter({
      routes: [{
        path: ‘/account‘,
        component: account,
        //使用children 属性，实现子路由。同时子路由的path前面不要带斜线/，否则永远以根路径开始请求，这样不方便用户去理解URL地址。即若带斜线，路径中显示/login，而非/account/login.
        children:[
          {path:‘login‘,compoment:login},
          {path:‘register‘,compoment:register},
        ]
      }]
    })

    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: ‘#app‘,
      data: {},
      methods: {}
    });
  </script>
</body>

</html>

　　

以上是关于vue之路由的嵌套 子路由的主要内容，如果未能解决你的问题，请参考以下文章

vue之vue-router嵌套路由

vue全家桶的使用＜router-view＞routerviewvueX嵌套路由子路由动态路由路由拦截路由守卫elementUiSPA

Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）router-link 标签的属性路由代码跳转懒加载路由嵌套（子路由）路由传递数据导航守卫）

vue路由嵌套，如何子路由也有选中样式

Vue-router 子路由（嵌套路由）

Vue-router 子路由（嵌套路由）