安装Vue Router 3.x
时间: 2024-03-05 07:50:16 浏览: 140
Vue3 +router
安装Vue Router 3.x很简单。你可以使用npm或yarn来安装。下面是使用npm安装的步骤:
1. 打开命令行终端并定位到你的Vue项目根目录。
2. 运行以下命令来安装Vue Router:
```
npm install vue-router@3.x --save
```
3. 安装完成后,在你的Vue项目中打开main.js文件并添加以下代码:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
4. 在你的Vue项目中创建一个router.js文件,用来定义路由。在这个文件中,你需要导入Vue和Vue Router,然后定义路由。下面是一个简单的例子:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
```
5. 在你的Vue项目中打开App.vue文件并添加以下代码:
```
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
```
6. 最后,在你的Vue项目中打开main.js文件并添加以下代码:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
这样,你就成功安装了Vue Router 3.x,并在你的Vue项目中使用了它。
阅读全文