vue3.0使用vue-router

废话不多说上来就开搞
先下载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 vue-router@4.0.0-beta.9 --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>

使用前别忘记自己创建对应的文件