vue中的路由以及默认路由跳转

• 在vue项目里使用vue-router，需先安装：

cnpm install vue-router --save

• 在main.js里面，主入口去配置路由并引入、挂载组件：

main.js：

import Vue from 'vue'
import App from './App.vue'

//引入组件
import Home from './Components/Home.vue';
import Cart from './Components/Cart.vue';

//先导入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);
//配置路由
const routes=[
  {
    path:"/",
    //挂载组件
    component:Home
  },
  {
    path:"/Cart",
    component:Cart
  }
]
//实例化路由（将配置需挂载给整个路由器）
const router=new VueRouter({
  routes:routes
});
//在vue实例上进行挂载
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

• 在App.vue根组件里写入路由的出口：

<router-view></router-view>

补充：
1.router-link
路由的入口,被网页解析完为a链接;
to解析完为href

<template>
  <div id="app">
    <!-- 
      router-link  路由的入口  被网页解析完为a链接 to解析完为href
     -->
     <router-link to="/">Home</router-link>
     <router-link to="/Cart">Cart</router-link>
    <router-view></router-view>
  </div>
</template>

2.路由的模块化封装
为防止后期路由过多，因此可将路由进行模块化封装

• 在src下新建一个名为Router的文件夹，在该文件夹里新建一个Router.js的文件；
• 在main.js里拿出有关路由的部分，放入Router.js中；

注：
（1）修改引入组件的路径；

import Home from '../Components/Home.vue';
import Cart from '../Components/Cart.vue';

（2）在其中需进行vue实例化引用，则需导vue

import Vue from 'vue'

• 将router暴露出去

export default router

• 在main.js中导入路由的模块化

import router from './Router/Rouer.js'

例：路由模块化封装
Router.js：

//引入组件
import Home from '../Components/Home.vue';
import Cart from '../Components/Cart.vue';

//导入vue
import Vue from 'vue';
//先导入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);
//配置路由
const routes=[
  {
    path:"/",
    component:Home
  },
  {
    path:"/Cart",
    component:Cart
  }
]
//实例化路由（将配置需挂载给整个路由器）
const router=new VueRouter({
  routes:routes
});
export default router

main.js：

import Vue from 'vue'
import App from './App.vue'

//导入路由的模块化
import router from './Router/Rouer.js'
//在vue实例上进行挂载
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})