Vue 路由配置

实用干货:

配置步骤:
1. 先 win+R 输入 cmd   安装在vue目录下: 如 cd D:\vue\vue01   

cnpm install vue-router --save  或者  npm install vue-router --save
2. 在 main.js 引入并 Vue.use(VueRouter)
       import VueRouter from 'vue-router'

        Vue.use(VueRouter)

 3.配置路由

  3.1 创建组件  注意  ./  是表示同级   ../ 表示 上一层

import Home from "./model/Home.vue";
import Mine from "./model/Mine.vue";

3.2 配置路由
 const routes = [
   { path: '/home' ,component : Home},
   { path: '/mine' ,component : Mine},
   // 默认路由
   { path: '*' ,redirect : "/home"}  
 ];

3.3 实例化 VueRouter

const  router = new VueRouter({
  routes:routes
});

3.4 挂载路由  在默认new Vue 中添加 router

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

3.5   在App.vue 中添加  <router-view></router-view> 

<router-link to="/home">首页</router-link>

<router-link to="/mine">我的</router-link>

<hr>

<router-view></router-view>