在vue3项目中使用vue-router

版本

"vue": "^3.0.0",
"vue-router": "^4.0.11"

创建项目

vue create <项目名称>，配置选择默认的vue3配置。
npm install vue-router@next 然后安装生产环境的vue-router。

路由配置

新建目录src/router，在该目录新建文件index.js。
src/router/index.js

//导入路由方法
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
import Home from '@/views/home'
import About from '@/views/about'
//路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
//路由创建
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

createWebHistory是设置history模式， createWebHashHistory是设置hash模式。

创建并挂载根实例

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//确保 _use_ 路由实例使整个应用支持路由。
createApp(App).use(router).mount('#app')

使用路由组件

<div class="nav">
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
</div>
    <hr width="100%">
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

效果