vue 路由配置

第一步：下载安装vue-router插件  npm install vue-router --save

 以下都是在main.js中操作

第二步：在main.js文件中引入插件并且使用

import VueRouter from 'vue-router'

Vue.use(VueRouter)

第三步：创建路由组件，在components文件夹中创建任意测试组件，

我创建的是 foo.vue 和bar.vue 然后import引入

第四步：（在main.js中进行操作）

①配置参数  const routes = [   {path:'/foo',component:foo}  ] 

② 实例化 vueRouter   const router = new VueRouter({ routes})   //第五步中花括号里面的的routes要上面的同名

③  挂载路由    new Vue({ router, render: h => h(App), }).$mount('#app')

第五部： 

接下来转移到App.vue

使用<router-link to="/foo"></router-link> 标签进行导航，to你在main.js里定义的path

加上标签 <router-view></router-view>渲染路由组件

App.vue

<template>
  <div id="app">
   <h1>你好路由</h1>
   <p><router-link to="/foo">go to foo</router-link></p>
   <p><router-link to="/bar">go to bar</router-link></p>
   <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    
  }
 
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false

Vue.use(VueRouter);

//1`创建组件
import foo from './components/foo.vue'
import bar from './components/bar.vue'
//2`配置路由
const routes = [
  {path: '/foo',component:foo},
  {path: '/bar',component:bar}

]
//3`实例化vuerouter

const router = new VueRouter({
  routes
})
// 4 挂载
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
//5根组件的模板中放入routr-view标签