vue路由

vue路由

随着前端的发展，越来越多的项目开发都选择用spa（单页应用：Single Page Application）应用的方式开发，与此同时对应的前端路由配置也是必不可少的，如果我们用原生的JS开发应用，或者利用jQuery之类的轻便JS库搭建应用，我们可以用到director.js等来配置路由，在vue中，我们可以通过vue-router来配置。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表，模块化的、基于组件的路由配置，路由参数、查询、通配符，基于 Vue.js 过渡系统的视图过渡效果，自定义的滚动条行为等等强大的功能。

使用方法：

在我们用vue脚手架搭建的vue项目中，src目录下已经自动生成了router目录，并且配置了index.js这样的一个文件，用来配置路径。

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  //mode: "history",
  mode: "hash",
  base: process.env.BASE_URL,
  routes
});

export default router;

这是初始化的路由配置，routes数组中每个对象就是一个路由配置，path属性是路径，name属性是名称，component属性就是这个路径对应需要加载的组件，我们做spa，就一般不用history模式，而是用hash模式，通过改变hash值来改变页面的（局部）渲染。

在上面我们也观察到了组件的引入加载有两种模式，一种是在routes外部引入，一种是在每个route对象中，component的属性值用函数来返回这个组件，其实这也是在为性能方面考量的，第一种方法引入的组件会在页面加载时一并加载，而第二种方式引入是异步加载，只会在组件需要加载是才加载（我们称为：按需访问，延迟加载，按需加载），也就是hash值发生匹配时才会加载。

然后我们用之前已经完成的组件来配置路由：

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login.vue";
import Reg from "../views/Reg.vue";
import Counter from "../components/counter/app.vue"
import TodoList from "../components/todoList/app.vue"

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "login",
    component: Login
  },
  {
    path: "/reg",
    name: "reg",
    component: Reg
  },
  {
    path: "/info",
    name: "info",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Info.vue"),  //异步加载（按需访问，延迟加载，按需加载），只有用户访问时才会加载
      children: [
        {
          path: 'counter',
          component:Counter
        },{
          path: 'todoList',
          component:TodoList
        }]
    },
];

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes
});

export default router;

二级路由

在上面的例子中可以看到了在info路由中的component属性中添加了children属性，数据结构是数组，这个数组中的每一个对象就是在给info路由配置二级路由，那么我们在info组件中就可以配置二级路径:

//views/info.vue
<template>
    <div>
        <ul>
            <li>
                <router-link to="/info/todoList">待办事项</router-link>
            </li>
            <li>
                <router-link to="/info/counter">计数器</router-link>
            </li>
        </ul>
        <router-view></router-view> 
        <!-- //嵌套路由使用 -->
    </div>
</template>

<script>
console.log("info component");

export default {
    name:"info"
}
</script>

<style scoped>

</style>

这里的 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。