VUE 路由配置及其使用

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

以下都是在main.js中操作

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

import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

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

第四步：配置参数

const routes = [ {path:'/foo',component:foo} ]

第五步：实例化vueRouter

const router = new VueRouter({ routes}) //第五步中花括号里面的的routes要和第四步定义的同名

第六部：挂载路由

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

以上都是在main.js中进行操作

接下来转移到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

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import VueRouter from 'vue-router'
 4 Vue.config.productionTip = false
 5 
 6 Vue.use(VueRouter);
 7 
 8 //1`创建组件
 9 import foo from './components/foo.vue'
10 import bar from './components/bar.vue'
11 //2`配置路由
12 const routes = [
13   {path: '/foo',component:foo},
14   {path: '/bar',component:bar}
15 
16 ]
17 //3`实例化vuerouter
18 
19 const router = new VueRouter({
20   routes
21 })
22 // 4 挂载
23 new Vue({
24   router,
25   render: h => h(App),
26 }).$mount('#app')
27 //5根组件的模板中放入routr-view标签

VUE 路由配置及其使用

推荐阅读