如何在vue脚手架里使用路由
时间: 2024-03-24 08:39:37 浏览: 13
在Vue脚手架中使用路由需要先安装Vue Router,可以通过以下命令进行安装:
```
npm install vue-router
```
安装完成后,在src文件夹下创建一个router.js文件。在router.js文件中,需要引入Vue和Vue Router,并且定义路由。例如:
```js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
在main.js文件中,需要引入router.js文件并使用路由:
```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
在Vue组件中使用路由可以使用`<router-link>`标签进行跳转,例如:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
在Vue组件中还可以使用`this.$router.push()`方法进行跳转,例如:
```js
this.$router.push('/')
this.$router.push('/about')
```
以上是在Vue脚手架中使用路由的基本步骤,具体可以根据实际情况进行调整。