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

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標簽