VueRouter的使用

VueRouter的使用

路由的使用时一个模式化的过程

script中引入的js

1 引入js

<script src="vue-router.js">

2 创建routes配置数组

const routes = [
  {
    
    
    path: '/',
    name: 'index',
    component: 组件
  }
]

3 把routes放在new VueRouter中

const router = new VueRouter({
    
    
  routes
})

4 将router放入到new Vue中

new Vue({
    
    
  router,
  el: '#app'
})

5 给挂载点添加一个router-view

<div id="app">
  <router-view></router-view>
</div>

vuecli使用

1 在src中新建router文件夹并新建index.js

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    
    

  }
]

const router = new VueRouter({
    
    
  routes
})

export default router

2 在main.js中引入router

import router from './router/index'

3 在main.js里的new Vue中写入router

new Vue({
    
    
  router,
  ...
})

4 重置app.vue

删除helloword的引入过程，删除组件模板中的内容，在div#app中加入router-view组件

注意

尽可能单独创建文件夹views(pages)，存放路由组件