Vue Vue-route （1）
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route介绍、下载及演示
目录
Vue-route路由
下载
演示路由
创建页面
注册路由
编写路由配置
路由容器
首页功能列表
总结
Vue-route路由
多页面：路径改变后就切换到相应的页面
路径通过映射表对组件进行显示和隐藏
每次路径改变就加载相应组件。
需要使用vue-router，如下：
下载
下载命令
npm install vue-router或者
npm install --save vue-router当前目录结构如下：
演示路由
创建页面
做路由需要三个页面（vue），我的 电影 影院三个组件；
把原来的页面删掉，创建三个页面分别为FilmsView/CinemasView/CenterView。
如下图：
注册路由
在main.js中导入路由，并在实例化Vue时，注册路由。
如果创建项目时就下载了router，默认是注册路由。
示例如下：
import Vue from 'vue'
import App from './App.vue' // 导入根组件
import router from './router' // 导入路由
import store from './store'Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')编写路由配置
在router/index.js中编写路由配置，解析路由地址。
示例如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/FilmsView'
import Cinemas from '@/views/CinemasView'
import Center from '@/views/CenterView'Vue.use(VueRouter) // 注册路由插件// 配置表
const routes = [{path: '/filems',name: 'filems',component: Films},{path: '/cinemas',name: 'cinemas',component: Cinemas},{path: '/center',name: 'center',component: Center}
]const router = new VueRouter({routes
})export default router会直接注册组件，不用手动注册
路由容器
重写App.vue中的内容，增加路由容器。
路由容器routeView，Route-view是插槽的一种变形。
示例如下：
<template><div>hello<!-- 路由容器 --><router-view></router-view></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="scss" scoped></style>首页功能列表
设置首页页面功能列表
示例如下：
<template><div><ul><li><a href="/#/films">电影</a></li><li><a href="/#/cinemas">影院</a></li><li><a href="/#/center">我的</a></li></ul><!-- 路由容器 --><router-view></router-view></div>
</template>
<script>
export default {data () {return {}}
}
</script>
<style lang="scss" scoped></style>访问
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route介绍、下载及演示