vue路由

1.安装vue-router

　　　　npm install vue-router --save

　　　　在package.json文件中可以看到vue-router的版本号

2.创建 router.js 文件。使用 Vue Router 一共需要4步：

　　2.1 引入 vue-router

// 在 router.js 写入以下代码
import Vue from 'vue';  //引入vue
import VueRouter from 'vue-router';  //引入vue-router

　　　2.2  执行 VueRouter

// 在 router.js 写入以下代码

Vue.use(VueRouter); //第三方库需要use一下才能用

　　2.3. 设置路由配置并引入对应的组件且实例化 VueRouter

　　

// 在 components/page 下创建 Login.vue ，写入以下代码
<!-- 创建Login组件 -->
<template>
  <div class="home-wrap">
    <span>Login组件</span>
  </div>
</template>


// 在 router/index.js 写入以下代码引入对应组件
import vHome from '../components/common/Home.vue';
import vLogin from '../components/page/Login.vue';

（//定义routes路由的集合，数组类型const routes//实例化VueRouter const router=new VueRouter//抛出这个这个实例对象方便外部读取以及访问export default router）

export default new VueRouter({
  routes: [//单个路由均为对象类型
    {
      path: '/home', // 设置 URL
      component: vHome, // 设置对应组件
      meta: {  // 设置相应元信息
        title: 'Home组件',
      },
    },
    {
      path: '/login',
      component: vLogin,
      meta: {
        title: 'Login组件',
      },
    },
  ],
});

2.4 将 VueRouter 挂载到 Vue 实例中

// 在 main.js 写入以下代码
// 引入 VueRouter
import router from './router';

// 实例化 Vue
new Vue({
//一定要注入到vue的实例对象上
  router,
  render: (h) => h(App),
}).$mount('#app');

这样我们的路由插件就成功引入并且配置好了。

 

<!-- 在 App.vue 中修改 template 部分为以下代码 -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

 

这个 <router-view></router-view> 便是我们最顶层的出口，通过路由调控的组件都会被渲染到这个出口位置。

 

3. 需要配置多个路由时，可以对路由配置进行简化，将引入的组件通过箭头函数直接挂载到组件上

export default new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('../components/common/Home.vue'),
      children: [
        {
          path: 'child',
          component: () => import('../components/page/Children.vue'),
        },
        {
          path: 'child1',
          component: () => import('../components/page/Children1.vue'),
        },
        {
          path: 'child2',
          component: () => import('../components/page/Children2.vue'),
        },
        {
          path: 'child3',
          component: () => import('../components/page/Children3.vue'),
        },
      ],
    },
  ],
});