Vue学习之旅Part16：Vue结合webpack使用vue-router实现路由和子路由

一、使用vue-router实现路由

由于是通过vue-router实现的路由 因此 须先安装vue-router：

输入cnpm i vue-router -S以安装vue-router包

然后 在main.js里导包：

导入VueRouter的包之前 必须先导入Vue的包：

import Vue from "vue"
import VueRouter from "vue-router"

然后手动调用Vue.use()方法 将vue-router安装到Vue上：

Vue.use(VueRouter)

创建路由对象VueRouter：

// 导入account组件
import account from "./main/Account.vue"
// 导入goodslist组件
import goodslist from "./main/GoodsList.vue"

var router=new VueRouter({
   
    routes:[
        // 定义路由规则
        {
   path:"/account",component:account},
        {
   path:"/goodslist",component:goodslist}
    ]
})

将路由对象挂载到Vue实例上：

var vm=new Vue({
   
    el:"#app",
    render:create=>create(app),
    // 挂载路由对象
    router
})

展示在页面上：

注：因为render会将el属性指定的容器里面的所有内容全部都清空覆盖
因此 不能将路由的<router-view>和<router-link>标签直接写到el属性所控制的元素中 否则是不会显示的

因此 可以将路由的<router-view>和<router-link>标签写到App.vue组件里
这样 当app组件展示出来时 就必然能看到路由的内容了

App.vue：

<template>
    <div>
        <h1>This is App component</h1>

        <router-link to