VUE 路由 自己理解

import Vue from 'vue'
import Router from 'vue-router'
//引入组件
import HelloWorld from '@/components/HelloWorld'
import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/', //链接路径
      name: 'HelloWorld', //路由名称，
      component: HelloWorld, //对应的组件模板
    },
    {
      path: '/demo1', //path  随意编名字就行  跳转的时候是这个名字
      name: 'demo1',
      component: demo1,
      children: [ //子路由,嵌套路由 （此处偷个懒，免得单独再列一点）
        {
          name: "demo3",
          path: 'demo3',
          component: demo3,
        },
      ]
    },
    {
      path: '/demo2',
      name: 'demo2',
      component: demo2,
    }
  ]
})

1.字路由使用方式

demo1

<template>
  <div class="hello">
    这是模板1
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style scoped>

</style>

demo2

<template>
  <div class="hello">
    <h1>这是模板3第三方个</h1>
  </div>
</template>

<script>
export default {
  name: 'demo3',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style scoped>

</style>

 app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <button @click="onlick1(0)">路由1</button>
    <button @click="onlick1(1)">路由2</button>
    <button @click="onlick1(2)">路由3</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created()  {
  },
  methods:{
    onlick1(index){
      if(index==0){
        this.$router.push({
          path:"/demo1"
        });
      }else if(index==1) {
          this.$router.push({
          path:"/demo2"
        });
      }else{
          this.$router.push({
          path:"/demo1/demo3"
        });
      }
    },
  }
}
</script>

<style>
</style>

想要访问子路由，

必须在父路由界面添加 router-view标签