1. 什么是路由及使用步骤
2.hash 和 history 模式
3.router-link 的各种配置项
4. 重定向和别名
5. 嵌套路由的使用
6. 命名视图
7. 滚动行为
8. 动态路径参数
9. 监控 $route 路由信息对象
10.quert 字符串传参
11. 导航切换过渡动画 transition 使用
12. 动态设置 name 属性左右切换
13. 编程式导航
14. 全局钩子函数
15. 组件级钩子函数
17.vue 插件的编写
18. 模拟登陆跳转
19. 面包屑导航设置
1. 什么是路由及使用步骤
1.vue-router 就是 前端路由
前端路由: 在 web 开发中, 路由是指根据 url 分配到对应的处理程序.(也就是说一个 url 对应的是一个处理程序, 访问不同的 url 对应的处理程序就会被执行)
具体到页面中就是一个 url 对应一个组件, 当我们访问到 url 的时候, 对应的组件就会被解析,
呈现到页面中去, 这时候我们知道一个 url 和一个组件有映射关系的, 我们需要有前端路由帮我们把映射关系一个一个对应起来
vue-router 的作用: 通过管理 url, 实现 url 和组件的对应和通过 url 进行组件之间的切换
2. https://router.vuejs.org/zh-cn/ vue-router 2 (官方文档)
3. 利用它可以做什么 ----- 单页应用 (SPA) (一个页面)
加载单个 html 页面, 并在用户与应用程序交互时动态更新改页面,(也就是在我们访问一个网站的时候, 实际上只访问了一个页面)
(当我们点击导航的时候它并不是去跳转页面, 而是通过 js 执行, 动态去加载页面)
4. 开始使用 vue-router------- 使用步骤
1. 安装模块 npm install vue-router --save
2. 引入模块 import VueRouter from 'vue-router'
3. 作为 Vue 的插件
4. 创建路由实例对象
new VueRouter({
配置参数....
})
5. 注入 Vue 选项参数
- new Vue({
- router
- })
6. 告诉路由渲染的位置
<router-view></router-view>
5.(因为我是用 vue-cli 作为脚手架时, 配置了 vue-router, 所以在改变 vue-router 配置项时, 在 router 文件夹下的 index.js 里面修改)
6.@是 src 目录, 在 build 文件夹有一个 webpack.base.conf.js 文件,
- resolve: {
- extensions: ['.js', '.vue', '.json'],
- alias: { // 别名
- 'vue$': 'vue/dist/vue.esm.js',
- '@': resolve('src'),
- }
- },
这一块是在使用 import 和 require 引入一个模块时的配置,
- 7.export default new Router({
- routes: [
- {
path: '/', 这一块访问根路径时,
name: 'home', 渲染的是 home 这个组件
- component:home
- }
- ]
- })
自己的小总结:(vue-cli 脚手架下有了 vue-router)
1. 首先在 components 文件夹下面建一个自己的组件 home
2. 在 router 文件夹下面的 index.js(配置路由的文件) 中, 引入我们所创建的 home 组件
- import home from '@/components/home' /*@是 src 目录 */
3. 配备路由, 并定义导航和组件的映射关系
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'home',
- component:home
- }
- ]
- })
4. 在 main.js(入口文件) 中, 将路由实例注入到根实例上
- new Vue({
- el: '#app',/*index.html 中 */
- router, /* 将路由实例对象注入到根实例上 */
- template: '<App/>', /*template 从根组件 app.vue 开始 */
- components: { App } /* 要在模板中使用这个组件, 需要先注册 1 下 */
- })
来源: http://www.qdfuns.com/article/39070/ea82f5d6a47a414f29194606c021369d.html