65 lines
920 B
Markdown
65 lines
920 B
Markdown
### 安装 vue-router
|
||
|
||
yarn add vue-router
|
||
|
||
### 准备：用vue-cli 新建文件
|
||
|
||
1.终端打开你当前目录 vue create +项目名
|
||
|
||
2.把 src/App.vue 文件重写为空白模板
|
||
|
||
3.在src/components目录下新建两个组件（a,b）
|
||
|
||
4. 在src/main.js 里引入 vue-router
|
||
|
||
>import VueRouter from 'vue-router'
|
||
|
||
注册使用：
|
||
|
||
>Vue.use(VueRouter)
|
||
|
||
### 正式使用 vue-router
|
||
|
||
1.在src/main.js中 定义 路径及映射的组件
|
||
|
||
```
|
||
const routes= [
|
||
{ path: "/a", component: aa },
|
||
{ path: "/b", component: bb },
|
||
|
||
]
|
||
|
||
```
|
||
|
||
2.实例化 VuRouter
|
||
|
||
```
|
||
const router = new VueRouter({
|
||
routes // (缩写) 相当于 routes: routes
|
||
})
|
||
|
||
```
|
||
|
||
3.渲染
|
||
（1） 在src/main.js中
|
||
|
||
```
|
||
new Vue({
|
||
el: '#app',
|
||
router,
|
||
render: h => h(App)
|
||
})
|
||
|
||
|
||
```
|
||
|
||
（2） 在src/app.vue 中 的id为 app 的div内部写入 router-view标签
|
||
|
||
```
|
||
<template>
|
||
<div id="app">
|
||
<router-view></router-view>
|
||
</div>
|
||
</template>
|
||
|
||
``` |