vue-router嵌套路由、默认路由

vue-router嵌套路由

• 嵌套路由是一个很常见的功能

  • 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
  • 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

• 路径和组件的关系如下:

• 实现嵌套路由有两个步骤:
  • 创建对应的子组件, 并且在路由映射中配置对应的子路由.
  • 在组件内部使用<router-view>标签.

1.在components文件夹中创建两个.vue文件:

HomeNews.vue

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HomeNews'
  }
</script>

<style scoped>

</style>

HomeMessage.vue

<template>
  <div>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeMessage"
  }
</script>

<style scoped>

</style>

2.在router文件夹中的index.js中配置子路由:

// 配置路由相关的信息
import VueRouter from 'vue-router';
import Vue from 'vue'

const Home = () => import('../components/Home.vue')
const HomeNews = () => import('../components/HomeNews.vue')
const HomeMessage = () => import('../components/HomeMessage.vue')

const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')
const Profile = () => import('../components/Profile.vue')

// 1. 通过vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '/',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [
      // 这是嵌套默认路由配置
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    }
  },
  {
    path: '/user/:userId',
    component: User
  },
  {
    path: '/Profile',
    component: Profile
  }
]

3.在App.vue中使用路由组件

<template>
  <div id="app">
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/about/message">消息</router-link>
  </div>
</template>

4.界面展示

• 新闻和消息就是首页组件里面的子组件，通过嵌套路由实现跳转切换