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

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

小渣渣吧

4338人浏览 · 2018-07-10 20:13:44

小渣渣吧 · 2018-07-10 20:13:44 发布

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

第一步当然是先来组件了，（引入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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^