Vue-router路由

---

前言

说明：

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

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js过度系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的Css class的链接
• HTML5历史模式或has模式，在IE9中自动降级
• 自定义的滑动条行为

一、安装

npm install vue-router --save-dev

如果在一个模块工程中使用它，必须要用过Vue.use();明确的安装路由功能。

import Vue from "vue";
import VueRouter from "vue-router";

// 安装路由
Vue.use(VueRouter);

测试

1. 先删除没有用的东西
2. components目录下存放我们自己编写的组件
3. 定义一个Content.vue的组件

<template>
    <h1>你好</h1>
</template>

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

<style scoped>

</style>

4. 安装路由，在src目录下，新建一个文件夹，router，专门存放路由

import Vue from "vue";
import VueRouter from "vue-router";

import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      path: '/content',
      name: 'content',
      component: Content,
    },
    {
      path: '/main',
      name: 'main',
      component: Main,
    },
  ]
});