vue3脚手架配置路由

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

安装路由

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

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

教程开始

在App.vue中

找到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')

效果图,请忽略样式

vue3脚手架配置路由

?

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

上一篇:win10时间同步服务器修改
下一篇:Git Push 深度解析:命令的区别与实践