6.webpack下使用 vue-router

在vue组件页面中，集成vue-router路由模块

vue-router官网

先贴上main.js的完整代码：

// 1.先引入包
// 2. 创建 vue 实例
import Vue from 'vue/dist/vue';
import app from './App.vue'

// 1.先导入路由模块
import VueRouter from 'vue-router'

// 2.安装 和使用路由模块
Vue.use(VueRouter)

// 3.导入需要展示的组件
import login from './comp/login.vue'
import regist from './comp/regist.vue'

// 4.创建路由模块
const router = new VueRouter({
    routes:[
        //redirect 设置默认显示的组件
        { path: '/', redirect: '/src/comp/regist' },
        {path:'/src/comp/login.vue',component:login},
        {path:'/src/comp/regist.vue',component:regist}
    ]
})


var vm=new Vue({
    el:'#app',
    data() {
        return {
            msg:"OK"
        }
    },
    methods: {
        
    },
    render:c=>c(app),

    //5.挂载路由模块
    router
    
})

这是组件顶层 App.vue 挂载代码

<template>
  <div>
     <p>这是模板的顶层（入口）组件</p> 

      <!-- 6.组件嵌入顶层组件 -->
      <router-link to='/src/comp/login.vue'>login</router-link>
      <router-link to='/src/comp/regist.vue'>regist</router-link>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {

  },
  components: {

  }
}
</script>

<style>

</style>

下面详细步骤：

步骤代码和完整代码不是一起写的，可能命名不同凑合看吧。

1. 导入路由模块：

import VueRouter from 'vue-router'

2. 安装和使用路由模块：

安装：
yarn add vue-router -D
使用：
Vue.use(VueRouter);

3. 导入需要展示的组件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'

4. 创建路由对象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

5. 将路由对象，挂载到 Vue 实例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

6. 改造App.vue组件，在 template 中，添加router-link和router-view：

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>