vue-7 Vue-router路由创建与使用

根据慕课网的课程做的笔记
Vue-router是官方的路由管理工具，用它来组建单页面的应用是非常简单的

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

例如添加一个other路由的方法：

1. 首先在src—>views添加一个other.vue组件
2. 在src–>router.js文件中添加一个路由
3. 在App.vue文件中添加router-link标签
   1 首先在src—>views添加一个other.vue组件:
   
   other.vue内容如下：

<template>
    <div>这是other</div>
</template>

<script>
    export default {
        name: ""
    }
</script>

<style scoped>

</style>

2 在src–>router.js文件中添加一个路由other.vue
router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      //添加other.vue路由
      path: '/other',
      name: 'otherAA',
      component: () => import(/* webpackChunkName: "about" */ './views/other.vue')
    }
  ]
})

3. 在App.vue文件中添加router-link标签

成功后，界面如下