关于vue.js:基本的vue路由配置

vue 是一个单页面利用，所有页面跳转都是通过路由来实现
上面开始路由的配置：{路由文件：router 中的 index.js 文件}
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
引入并应用路由

const home = () => import('../views/home-index.vue');
// 开始咱们先引入一个路由页面{应用了路由懒加载，和图片懒加载的情理差不多，只有在跳转的时候才会加载进去，避免首次进入的时候耗费过多的工夫}
const routes = [{
  path: '/',
  name: 'home',
  component: home,
}, {
  path: '/signIn',
  name: 'signIn',
  component: signIn,
  meta: {title: '登录'},]
// 这里我配置了两个路由{没有全副引入}
})

export default router

首先开始介绍属性：
path：这个是地址栏下面显示的值{例：www.taobao.com/user。这里 user 就是那个 path}

name：一个命名相似于给这个路由增加了一个 id 在组件中应用路由跳转的时候会用到 {编程式导航} 相似于 window.open 那种

component：这个值算是比拟要害的就是组件的名字，要和引入时的值放弃对应，比方：path：user 对应 user 的组件

在理论开发中可能会遇到一些问题；我想在首页路由中切换一部分怎么办？在登录和注册页面进行路由互相调换怎么办？
路由还提供了一种 children 模式

const routes = [{
  path: '/',
  name: 'home',
  component: home,
  children: [{ // home 的子组件
    path: '',
    name: 'homeIndex',
    component: homeIndex
  }, {
    path: '/user',
    name: 'user',
    component: user,
  }]
} ]

咱们创立一个 children 数组在数组中创立路由对象就能够了，
在组件中还是失常跳转

const router = new VueRouter({
// mode: ‘history’, // 勾销历史模式
// base: ‘/dist’,
routes
})