vue-配置路由规则和显示路由

路由规则的配置在src/router/index.js中，可配置如下内容：import { createRouter, createWebHistory } from vue-routerimport Home from ../views/Home.vueimport About from ../views/About.vueconst routes = [...

　　路由规则的配置在src/router/index.js中，可配置如下内容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/home', //相对于http://localhost:端口号
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

　　在App.vue进行显示：

<template>
  <div id="nav">
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

　　router-link和router-view是vue提供的组件；

　　router-link是链接到路由，最后会渲染成一个a标签，href指向的就是路由的路径；

　　router-view是路由转发的组件最终要显示的一个位置。

　　总结：router-link是负责引入组件，而router-view是组件最终要显示的位置。

　　这种方式也是父子组件的关系，但和之前学的父子组件不一样的是：他的子组件是动态的，根据路由不同而不同的；之前都是固定好的，父组件的子组件都是确定下来的。