Vue中的路由以及默認路由跳轉

官方網址

https://router.vuejs.org/

Vue路由配置

安裝

npm install vue-router --save
或者
cnpm install vue-router --save

引入並使用

在main.js中：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

配置路由

1. 定義路由，在main.js中：

const routes = [
   		  { path: '/foo', component: Foo },
   		  { path: '/bar', component: Bar },
   		  { path: '*', redirect: '/home' }   /*默認跳轉路由*/
   		]

2. 實例化VueRouter，在main.js中：

const router = new VueRouter({
   		  routes // （縮寫）相當於 routes: routes
   		})

3. 掛載，在main.js中：

new Vue({
   	  el: '#app',
   	  router，
   	  render: h => h(App)
   	})

4. 在根組件模塊中引入，如App.vue中：

 <router-view></router-view>  

5. 根組件模塊中放入默認路由跳轉

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>