vue-关于路由的基本设置

安装：npm install vue-router

步骤：

1. 引入vue、vue-router 并注册为插件
2. 新建路由(路径和组件的映射关系)
3. 新建路由器
4. 将路由注册给路由器
5. 将路由器注册给Vue
6. 为路由组件进行占位（内容显示在哪，占位就写在哪）

相关代码：

// 1. 引入vue、vue-router 并注册为插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 2. 引入组件并新建路由(路径和组件的映射关系)
import nameA from './components/A'
import nameB from './components/B'
import nameC from './components/C'

const routes=[
  {path: '/a',component:nameA},
  {path: '/b',component:nameB},
  {path: '/c',component:nameC},
  //重定向
  {path: '/',redirect:'a'}
]


//3. 新建路由器
const router = new VueRouter({
  //4. 将路由注册给路由器 
  routes //ES6语法，相当于routes:routes  前者不可改变，后者为路由变量名
})

//5.将路由器注册给Vue
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router //ES6语法，相当于router:router  前者不可改变，后者为路由器变量名
})

<div id="app">
    <!--<a href="/#/a">A</a>-->
    <!--<a href="/#/b">B</a>-->
    <!--<a href="/#/c">C</a>-->

    <router-link to="/a">A</router-link>
    <router-link to="/b">B</router-link>
    <router-link to="/c">C</router-link>
    <!--6. 为路由组件进行占位-->
    <router-view></router-view>
  </div>

注：
嵌套的路由路径不能写 / 会被当作根路径处理
< router-link >基于全局 路径要写完整

注：

注：
router为路由器
route为路由
redirect重定向后跟字符串
path为地址栏路径，component后为组件名