前言
说明:
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);
测试
- 先删除没有用的东西
- components目录下存放我们自己编写的组件
- 定义一个Content.vue的组件
<template>
<h1>你好</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
- 安装路由,在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,
},
]
});