vue项目中路由router配置(vue_v2.6.10,vue

vue-router是负责vue项目中页面跳转，子组件在父页面展示的组件

1)安装

当前项目路径下，并在node环境下直接输入

npm install vue-router --save-dev  

2)配置 - router.js

在router.js文件内（如果没有，则手动新建router.js文件）
导入vue组件和vue-router，然后挂载在vue组件上

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

接着，导入页面组件到main.js和router.js页面内

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

最后在router.js文件内配置输出

export default new Router({
  routes: [
    {
        path : '/index', 
        name : 'index',
        component :  index
    },
    {
        path : '/login',
        name : 'login',
        component :  login 
    }
  ]
})

3)配置 - main.js

在main.js文件内导入刚才的router.js文件

import router from './router'

然后把"router"写在vue对象实例中加载

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

4)配置 - App.vue

把<router-view></router-view>写在<div id="app"> </div>内

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

5)vue文件做跳转 - index.vue & login.vue

在index.vue文件内

<template>
  <div>
      <router-link  to="/login">切换到login组件</router-link>
  </div>
</template> 

在login.vue文件内

<template>
  <div>
      <router-link  to="/index">切换到index组件</router-link>
  </div>
</template> 

5)运行&测试

最后是启动项目即可查看效果

npm run serve