Vue（十四）：Router

Posted 2020-12-09 liangshibo

　　前言：学习路由之前会觉得路由比较神秘，简单学习之后觉得路由还是比较简单的，或者说基本的路由使用还是比较简单的。普通的网站路由，是通过访问不同的地址，获取到不同的页面来实现网站各个页面之间的访问。vue的路由一般用于单页面，可以简单的理解成通过访问不同的路由地址，获取到不同的组件，实例化在页面指定的地方，以此来实现网站的路由。
1、在Vue项目中的使用
　　下面贴出了在vue中使用router的代码，分别是在不同的文件中。我们通过<router-link>标签跳转到对应的路由，通过<router-view>渲染路由映射的组件。我们创建的vue项目，默认根实例是App.vue,入口文件是main.js。从下面的代码可以看出来，我们把router中导出的路由放在了App.vue中，这也就代表着，我们可以在该项目的任何实例中访问设定的路由，通过访问不同级别的路由，显示出不同渲染的组件。

import router from ‘./router‘  //main.js
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘,
})

<template>  //App.vue
  <div id="app">
    <router-link to="/BtContent">Go to demo(基础)</router-link>
    <router-link to="/AssContent">Go to demo(组件)</router-link>
    <router-view></router-view>
  </div>
</template>

import Vue from ‘vue‘  //router/index.js
import Router from ‘vue-router‘
import BtContent from ‘@/study/baseData/BtContent‘
import AssContent from ‘@/study/component/AssContent‘
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: ‘/BtContent‘,
      name: ‘BtContent‘,
      component: BtContent
    },
    {
      path: ‘/AssContent‘,
      name: ‘AssContent‘,
      component: AssContent
    }
  ]
})

2、