Vue2.x 系列文章目录
内容 | 参考链接 |
---|---|
Vue2.x - 基础 | Vue2.x - 基础 |
Vue2.x - 进阶 | Vue2.x - 进阶脚手架 |
Vue2.x - 高级 Vuex | Vuex概念、工作原理、环境搭建、基本使用、getters |
Vue2.x - 高级 Vuex | Vuex 四个 map 的用法、模块化和命名空间 |
Vue2.x - 高级 Vue-router | 路由的概念、基本使用 |
Vue2.x - 高级 Vue-router | 嵌套路由、query参数、命名路由、params参数、props配置 |
Vue2.x - 高级 Vue-router | replace属性、编程式路由导航、缓存路由组件、路由的专属钩子 |
Vue2.x - 高级 Vue-router | 全局路由守卫 |
Vue3.0 - 新增 | Vue3.0 新增内容 |
Vue2.x 项目(附源码) | Vue + ElementUI 后台管理项目(附源码) |
Vue3.0 项目 | Vue3.0 企业级 App |
文章目录
一、相关理解
1. vue-router 是什么?
vue-router 是 vue 的一个插件库,专门用来实现 SPA 应用。
2. SPA 是什么?
- 单页 Web 应用(single page web application,SPA)。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
3. 路由的理解
- 什么是路由?
- 一个路由就是一组映射关系(
key-value
)。- key 为路径,value 可能是
function
或component
。
- 路由的分类
- 后端路由:
(1)理解:value 是 function,用于处理客户端提交的请求。
(2)工作过程:服务器收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。- 前端路由:
(1)理解:value 是 component,用于展示页面内容。
(2)工作过程:当浏览器的路径改变时,对应的组件就会展示。
二、路由的基本使用
1. 安装 vue-router
在终端键入:npm i vue-router@3
对应的是 vue2.x 版本
2. 应用插件
Vue.use(VueRouter)
3. 编写 router 配置项
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
]
})
4. 实现切换(active-class可配置高亮样式)
active-class
是vue-router
模块的router-link
组件中的属性,用来做选中样式的切换
点击哪个导航栏哪个导航栏高亮
<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/about">Home</router-link>
5. 指定展示位置
指定在页面中展示的位置
<router-view></router-view>
三、实例:路由的基本使用
点击导航栏,切换显示的内容,并且页面不刷新,地址栏地址更改。
路由基础
main.js
- 首先在
main.js
中引入路由(vue-route)和路由器(router)并配置
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
// 关闭 vue 的生产提示
Vue.config.production = false
// 应用组件
Vue.use(VueRouter)
//创建 vm
new Vue({
el:'#app',
render: h => h(App),
router: router
})
./router/index.js
- 在 router 文件夹下的
index.js
文件中引入事先定义好的组件- 通过
new VueRouter
创建一个路由器- 路由器里面来配置路由:
routes: [{...}]
- 路径:
path: '/xxx'
,用于和to='/xxx'
匹配,如果不匹配,则内容不呈现。- 组件:
component: 组件名
,路径映射到的组件
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
]
})
Home.vue
- Home 组件,配置呈现的内容
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name: "myHome",
};
</script>
About.vue
- About 组件,配置呈现的内容
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: "myAbout",
};
</script>
App.vue
- 标签不写
<a>
,而是<router-link>
- 属性不写
href
,而是to
- 地址不写
./xxx.html
,而是/xxx
,呈现在地址栏中。用于和path: '/xxx'
匹配,如果不匹配,则内容不呈现。- 指定呈现位置用标签
<router-view>
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: { },
mounted() {
console.log(this);
},
};
</script>
四、几个注意点
-
路由组件通常放在
pages
文件夹,一般组件通常放在components
文件夹。
-
通过切换,隐藏了的路由组件,默认是被
销毁
的,需要的时候再去挂载。 -
每个组件都有自己的
$route
属性,里面存储着自己的路由信息。 -
整个应用只有一个
router
,可以通过组件的$router
属性获取到。
不积跬步无以至千里 不积小流无以成江海