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標籤

成功後，界面如下