如何在uni-app中使用Vue-router呢?
时间: 2023-06-13 14:03:52 浏览: 190
uniapp项目主要是nvue实现的模板示例
在uni-app中使用Vue-router跟在普通的Vue项目中使用Vue-router是类似的,以下是简单的步骤:
1. 安装Vue-router
```bash
npm install vue-router --save
```
2. 在`main.js`中引入Vue-router并注册
```javascript
import Vue from 'vue'
import App from './App'
import router from './router' // 引入router
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
router // 注册router
})
app.$mount()
```
3. 创建路由文件`router/index.js`
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
```
4. 在需要使用路由的组件中使用`<router-link>`和`<router-view>`即可
```html
<template>
<div>
<router-link to="/">Hello World</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
以上是一个简单的使用Vue-router的demo,你可以根据自己的需求进行更改。
阅读全文