Vue-router 路由使用版权声明：本文为博主原创文章，未经博主允许不得转载。

查看依赖是否有路由，没有路由就安装路由 npm install vue-router

创建router.js(用于配置路由组件及对应地址等)

import Vue from 'vue' 
import Router from 'vue-router'   //引入vue及路由
Vue.use(Router)   //使用路由

//组件模块
//引入vue和router模块
import Vue from 'vue'
import Router from 'vue-router'
//引入路由组件
import Login from './components/Login'
import Index from './components/Index'
import Hello from './components/Hello'

//使用router
Vue.use(Router)

export default new Router({
    //配置路由模块
    routes: [
        {
            path: '/',
            name: 'login',
            component:Login
        },
        {
            path: '/index',
            name: 'Index',
            component: Index,
            children: [
                {
                    path: 'hello',
                    name: 'Hello',
                    component: Hello

                }
            ]
        }
    ]
})

在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

在App.vue中，完成对应路由设置

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

在index.vue中，进行路由嵌套实现

<template>
  <div class="hello">
    <h1>欢迎进入</h1>
    <router-link to="/index/hello">跳转</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>