Vue3系列：4、路由

4. 路由

4.1. 【对路由的理解】

4.2. 【基本切换效果】

• Vue3中要使用vue-router的最新版本，目前是4版本。

• 路由配置文件代码如下：

  import {
       createRouter,createWebHistory} from 'vue-router'
  import Home from '@/pages/Home.vue'
  import News from '@/pages/News.vue'
  import About from '@/pages/About.vue'
  
  const router = createRouter({
       
  	history:createWebHistory(),
  	routes:[
  		{
       
  			path:'/home',
  			component:Home
  		},
  		{
       
  			path:'/about',
  			component:About
  		}
  	]
  })
  export default router
  

• main.ts代码如下：

  import router from './router/index'
  app.use(router)
  
  app.mount('#app')
  

• App.vue代码如下

  <template>
    <div class="app">
      <h2 class="title">Vue路由测试</h2>
      <!-- 导航区 -->
      <div class="navigate">
        <RouterLink to="/home" active-class="active">首页</RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
        <RouterLink to="/about" active-class="active">关于</RouterLink>
      </div>
      <!-- 展示区 -->
      <div class="main-content">
        <RouterView></R