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 [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');

这样我们就可以使用路由了

扫描二维码关注公众号，回复： 15827473 查看本文章

<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>

在这里插入图片描述
使用前别忘记自己创建对应的文件

猜你喜欢