vue3脚手架配置路由

本文以router-link（相当于一个a标签）为例介绍路由基础环境的配置

安装路由

打开cmd输入 
npm install vue-router@4

注意，本文使用路由为vue-router: "^4.0.12"（按照上面代码安装即可），不同版本之间会出现一些不同容易发现一些无法预料的错误

教程开始

在App.vue中

<template>
<div id="app">
  <h1>Hello App!</h1>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <div class="main_nav">
      <ul>
        <li><router-link to="/about_">首页</router-link></li>
        <li><router-link to="/about_us">关于我们</router-link></li>
        <li><router-link to="/HelloWorld">产品介绍</router-link></li>
      </ul>
    </div>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

找到src目录的main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'//解构路由
import Home from './components/home.vue'   //引入一个组件，from后面接的是一个组件的路径，home.vue为我随意创建的一个文件，里面随便加点内容即可
import About_us from './components/about_us.vue'

//定义路由
const routes = [{
    path: '/about_',//组件一，path和component可以乱写，
                       只要保持path与前面to，component和import两处相同即可
    component: Home
},
{
    path: '/about_us',
    component: About_us
},
]

//配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes,//这里是routes：routes的缩写，同时此处还可以定义路由
})

//创建一个vue应用，本处写法适用于前面所说的路由版本，其他版本自测
const app = createApp(App).use(router);
app.mount('#app')

效果图，请忽略样式

 

本人vue为零基础，若有错误望多多包涵