Vue 路由（router）

vue中router.js如何生成

在Vue中，使用Vue Router来实现路由功能，切换/跳转页面。要创建路由，需要在项目中创建一个router.js文件，并在该文件中定义路由。Vue2.0版本会在创建项目的过程中询问是否加载路由器（按回车键，默认允许），后面会在目录生成router文件夹。

index.js

import Vue from 'vue'		// // 引入Vue
import Router from 'vue-router'		 引入Router
import Home from '@/components/HomeLink'  		// 引入组件
import About from '@/components/AboutLink'		// // 引入组件

Vue.use(Router)			// 使用Router插件

export default new Router({  // 创建Vue Router路由实例并导出
  routes: [					// 定义路由
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在上面的代码中，我们首先导入Vue和Router ，然后使用Vue.use(Router)来告诉Vue使用Router插件。接下来，我们定义了两个路由，分别是/home和/about，并将它们对应的组件分别设置为Home和About。最后，我们创建了一个Router实例，并将其导出供其他组件使用。

需要注意的是，上面的代码中使用了ES6的模块化语法，需要使用import和export关键字来导入和导出模块。

使用vue Router插件 main.js如何更改

因为在创建项目时已经装了路由插件，所以生成的main.js文件中默认已完成Vue Router的配置。后面可以根据自己的需求修改路由配置。
main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

路由组件如何创建？

HomeLink.vue

<template>
    <div class="home">
      <span>This is a Home page</span>
    </div>
</template>
   
  <script>
  export default {
    name: 'home'
  }
  </script>
   
  <style lang="less" scoped>
  .home {
    width: 80%;
    height: 50%;
    margin: auto;
    background: rgb(24, 200, 253);
  }
  </style>

AboutLink.vue

<template>
  <div class="about">
    <span>This is an about page</span>
  </div>
</template>

<script>
export default {
  name: 'about'
}
</script>

<style lang="less" scoped>
.about {
  width: 80%;
  height: 50%;
  margin: auto;
  background: rgb(250, 147, 12);
}
</style>

export default {name: 'xxx'} 属性name
routes: [{path: '/home', name: 'xxx', component: Home} 属性name
注：如果export default { name: ‘xxx’ }组件中的name属性与路由定义中的name不一致会怎样？在使用<router-link>和router.push()等路由相关的方法时，需要使用路由定义中的name属性来指定要跳转的路由。如果不使用路由定义中的name属性进行跳转，可能会出现路由跳转失败的情况。

项目入口文件App.vue如何渲染？

App.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- 使用<router-link>进行导航，to为路由配置中的路径，active-class为链接激活时的样式 -->
      <router-link to="/home" active-class="isActive">Home</router-link>
      <span>|</span>
      <router-link to="/about" active-class="isActive">About</router-link>
      <div class="router-view-content">
        <!-- 使用<router-view>渲染路径匹配到的视图组件 -->
        <!--点击Home，<router-view />渲染Home组件-->
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import Home from "@/components/HomeLink.vue"
import About from "@/components/AboutLink.vue"

export default {
  data() {
    return {
    }
  },
  components: {
    'home': Home,
    'about': About
  }
}  
</script>

<style lang="less">
#app {
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  height: 100%;

  span {
    display: inline-block;
    margin: 10px;
  }
}

.router-view-content {
  width: 500px;
  height: 500px;
  margin: auto;
  background: #4dc08c;
}

.isActive {
  color: red;
}
</style>

vue-router 的基本作用 就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。常规路径规则为在当前 url 路径后面加上 #/path，path 即为设定的前端路由路径。

上述App.vue文件中，包含了一个使用Vue Router的基本布局。我们首先在<div>标签中使用了两个<router-link>组件来创建导航链接，这些链接会根据路由器的配置自动更新。然后，在<router-view>标签中，我们根据路径渲染当前路由所匹配到的组件。

页面渲染效果

http://localhost:8080/#/home (1)

http://localhost:8080/#/about (2)

遇到的BUG

1. 报错原因：文件路径不对或者文件名敲错ERROR ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js
   
2. ESlint对语法的要求太过严格导致编译错误
   解决：取消ESlint验证规则即可。
   1.在build文件夹下找到webpack.base.conf.js
   2.将…(config.dev.useEslint ? [createLintingRule()] : []),注释掉

如果项目是vue脚手架项目的话，你就可以找到项目根目录下的bulid文件夹下的 webpack.base.conf.js，把验证规则 rules里的代码注释掉即可，注释完保存退出，重启下项目即可解决。
但如果你的项目不是vue脚手架项目，你也没有build文件夹，那么你可以在根目录下的config文件夹下的index.jx文件中进行操作，只需要把dev下的useESlint属性设置为false即可。