废话不多说上来就开搞
先下载vue3.0
yarn global add @vue/cli@next
或者
npm install -g @vue/cli@next
接下来就是构建手脚架
vue3.0使用的是vite
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。
npm init vite-app 你的项目名字
cd vite-app
npm install
到这边就是可以运行程序了但是我们还是要使用vue-router所以我们要下载vue-router
npm install [email protected] --save
我这边使用高德是最新的vue-router4.0
下载完成以后我们启动程序
npm run dev
然后我们新建一个router.js的文件 来进行编辑
import {
createRouter,createWebHistory } from 'vue-router'
import index from './components/index.vue'
import login from './components/login.vue'
const routerHistory = createWebHistory()
const routes = [
{
path:'/',
name:'index',
component:index
},
{
path:'/login',
name:'login',
component:login
}
]
const router = createRouter({
history: routerHistory,
routes
})
export default router
上面的代码我们先是引入vue-router 然后就和vue2.0里创建路由的方式一样
最后导出router
接着就是到main.js
我们
要引入自己创建的router.js
然后把router挂载到app上
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'
const app = createApp(App);
app.use(router);
app.mount('#app');
这样我们就可以使用路由了
<template>
<div @click="gotopath('/login')">点我去登录</div>
<div @click="gotopath('/')">点我去首页</div>
<router-view></router-view>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0
}
},
methods:{
gotopath(e){
this.$router.push(e)
}
}
}
</script>
使用前别忘记自己创建对应的文件