vue2 子路由访问

主要讲解

子路由怎么配置：在某个路由下使用children配置项，仿造父级路由进行配置
子路由怎么访问：router-link配置的完整路由地址
路由组件放在哪里：pages/views目录下(目录需自行创建

学习课程

B站课程：https://www.bilibili.com/video/BV17h41137i4/?p=128 （需使用浏览器打开）

路由组件

与src/components处在同级目录，路由文件就需自行创建
一般叫pages，或者叫views，这是存放路由组件的文件夹
与处在components下的普通组件不同，处在pages/views下的组件，被称为路由组件

App.vue

<template>
  <div id="app">
    <MyHeader />

    <img alt="Vue logo" src="./assets/logo.png" />
    <p>
      <router-link to="/hello">点击切换 helloworld 组件页面</router-link>
    </p>
    <p>
      <router-link to="/user">点击切换 user 组件页面</router-link>
    </p>

    <h1>查看下方组件切换效果</h1>
    <br /><br /><br />
    <p>
      <router-view msg="HelloWorld"></router-view>
    </p>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
export default {
  name: "App",
  components: {
    MyHeader,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

UserInfo.vue

注意这里访问Blog路由组件的to链接，不能写为blog
而要写明完整路由层级地址为/user/blog，与路由文件route.js的children相呼应

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li>name：anbin</li>
      <li>sex：man</li>
      <li>age：18</li>
    </ul>

    <p>
      <!-- 子级路由切换,注意此处路径是/user/blog 而不是/blog -->
      <router-link to="/user/blog">go to he blog</router-link>
    </p>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      msg: "用户信息组件",
    };
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

Blogs.vue(子路由,需要访问该路由)

<template>
  <div>
    <br /><br /><br />
    <h1>欢迎来到anbin's Blog</h1>
  </div>
</template>

<script>
export default {};
</script>

route.js

// 导入vue
import Vue from 'vue'

// 导入路由对象
import VueRouter from 'vue-router'

// 让vue使用路由对象
Vue.use(VueRouter)

// 导入要路由的组件
import HelloWorld from '../pages/HelloWorld.vue'
import UserInfo from '../pages/UserInfo.vue'
import Blogs from '../pages/Blogs.vue'

// 定义路由
const routes = [
  { path: '/hello', component: HelloWorld },
  {
    path: '/user',
    component: UserInfo,
    /* 
      子路由配置,属于user路由下的子路由,
      vue模板中访问需设置vue-router的to路径为/user/blog才能正确触发该路由
    */
    children: [
      {
        path: 'blog', component: Blogs
      }
    ]
  }
]

// 创建路由router实例,传入路由
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 暴露路由router实例，供main.js使用
export default router

触发效果

在进入App.vue后，点击 /user切换user路由 页面后，再点击 /user/blog切换blog路由 页面
触发route.js中， 触发user路由子路由配置项children中的blog
因为是子路由，所以blog不能有/
否则路由层级被破坏，代表从一级路由开始访问blog，导致无法切换