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>