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></RouterView>
      </div>
    </div>
  </template>
  ​
  <script lang="ts" setup name="App">
    import {RouterLink,RouterView} from 'vue-router'  
  </script>