页面直接引入 vue-router 定义路由+嵌套路由新手入门

最新推荐文章于 2024-03-10 20:37:22 发布

小渣渣吧

最新推荐文章于 2024-03-10 20:37:22 发布

阅读量4.2k

点赞数 1

分类专栏： vue 文章标签： vue-router 嵌套路由

本文链接：https://blog.csdn.net/qq_36660558/article/details/80991304

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单来说，路由实现起来需要四步，闲话不多说，直接上代码

第一步当然是先来组件了，（引入vue，vue-router就不多说了）

var a = Vue.component('lee', {
    template: '#lee'
})
var b = Vue.component('lee1', {
    template: '#lee1'
})

var c = Vue.component('lee2', {
    template: '<div>c</div>'
})
var s = Vue.component('lee3', {
    template: '<div>s</div>'
})

第二步配置routes

 var routes = [
    {
      path: '/',
      component: a
    },
    {
     path: '/lee1',
     component: b,
     children: [
       {   //此处配置为嵌套路由
        path: '',      //路由为/lee1是匹配到此处
        component: s
       },
       {
        path: 'c',    //路由为/lee1/c是匹配到此处
        component:c
       }
      ]
    }
]

第三步把设置好的routes放到创建的VueRouter实例中

var router = new VueRouter({
   routes   //es6语法  完整的为 routes：routes
}）

第四步将VueRouter放到 vue实例中

  new Vue({
   el: '#box',
   router    //es6语法  完整的为 router：router

})

上面的是js部分的代码，完整代码如下

<!DOCTYPE html>
<html>


<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="vue.min.js"></script>
  <script src="vue-router.min.js"></script>
</head>


<body>
  <div id="box">

   <router-link to="/">lee</router-link>
   <router-link to="/lee1">lee1</router-link>

   <router-view></router-view>
  </div>
  <template id="lee">
    <div>
       lee
   </div>
  </template>
  <template id="lee1">
    <div>
      <router-link to="/lee1">你好s</router-link>
      <router-link to="/lee1/c">你好c</router-link>
      <br>
      <router-view></router-view>
    </div>
  </template>
</body>
<script>
   var a = Vue.component('lee', {
                 template: '#lee'
            })
   var b = Vue.component('lee1', {
                 template: '#lee1'
            })
   var c = Vue.component('lee2', {
                 template: '<div>c</div>'
            })
   var s = Vue.component('lee3', {
                 template: '<div>s</div>'
            })
   var routes = [
        {
         path: '/',
         component: a
        },
        {
         path: '/lee1',
         component: b,
         children: [
          {
           path: '',
           component: s
          },
          {
           path: 'c',//注意二级路由是不需要加/的
           component:c
          }
         ]
        }
      ]

var router = new VueRouter({
     routes
})

new Vue({
   el: '#box',
    router
})

</script>


</html>

小渣渣吧

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
页面直接引入 vue-router 定义路由+嵌套路由新手入门

简单来说，路由实现起来需要四步，闲话不多说，直接上代码第一步当然是先来组件了，（引入vue，vue-router就不多说了） var a = Vue.component('lee', { template: '#lee'})var b = Vue.component('lee1', { template: '#lee1'})var c = ...
复制链接

扫一扫