路由是一种对应关系
1.什么是后端路由
客户端请求的 url 地址和服务端对该地址的处理函数的对应关系
2.什么是前端路由
前端路由就是根据不同的 url 地址展示不同的内容或页面
- hash history 2种模式
- 什么时候使用前端路由
在单页面应用，大部分页面结构不变，只改变部分内容的时候使用
3.前端路由优缺点
- 优点
用户体验好，不需要每次都从服务器全部获取，只改变部分内容的时候使用
- 缺点
不利于 SEO
使用浏览器前进、后退键会重新发送请求，没有合理利用缓存
单页面无法记住之前的滚动的位置，无法在前进，后退的时候记住滚动的位置
4.vue中路由基本使用
1.通过 script 标签引入 vue-router
2.定义组件
3.实例化路由对象 new VueRouter
4.配置路由规则
5.挂载路由 -- 设置路由和 vue 的关系
6.渲染路由 -- router-view router-link
5.路由高亮
router-link-active
linkActiveClass: 'active'
6.路由重定向
redirect
{
path: '/',
redirect: '/home'
}'
404
{
path: '*',
component: NotFoundPage
}'
7.路由传参
// ?name query取参数
this.$route.query.name
// /:name 动态路由取参数
this.$route.params.name
// 路由 props取参数
// 路由配置
{
path: '/:name',
component: Home,
props: true,
}
// Home 配置 props
props: ['name']
8.声明式导航 编程式导航
<router-link to=""></router-link> // 声明式导航
this.$router.push('') // 编程式导航
9.嵌套路由
{
path: '/home',
component: Home,
children: [
{
path: '/home/recomment',
component: Recomment
}
]
}
10.命名视图路由出口 不常用 router-view
{
path: '/',
components: {
default: Header,
main: Main,
footer: Footer
}
}
<router-view></router-view>
<router-view name="main"></router-view>
<router-view name="footer"></router-view>
11.路由进阶
- 全局路由前置守卫 beforeEach()
router.beforeEach((to, from, next) => {});
to 即将进入的路由对象
from 来源于路由对象
next 用于放行，跳转路由
- 全局路由后置守卫 afterEach()
router.afterEach(() => {
// 路由 done 后的操作，比如关闭跳转过程中 loading动画
});
- 路由独享守卫 beforeEnter()
{
path: "/login",
component: Login,
// 路由的独享守卫
beforeEnter(to, from, next) {
// console.log(111);
if (localStorage.token) {
next("/");
} else {
next();
}
},
meta: {
auth: true,
},
},
- 组件内置守卫 bforeRouterEnter()
template: `
<div>
<h1>请登录账号</h1>
<button @click="login">登录</button>
</div>
`,
// 组件内的守卫
beforeRouteEnter(to, from, next) {
console.log(111);
if (localStorage.token) {
next("/");
} else {
next();
}
},
methods: {
login() {
localStorage.token = "LFJSFLDJSLFJSLFJSLFJ";
this.$router.push("/");
},
},
12.methods watch computed区别
- watch 的2种用法
__浅层监听
watch: {
// 浅层侦听
msg(newVal, oldVal) {
console.log(newVal, oldVal);
},
},
__深度监听
watch: {
// 设置深度侦听
obj: {
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
// 开启深度侦听
deep: true,
// 立即触发
immediate: true,
},
},
- computed 的2种用法
<h1>{{firstname + '-'+lastname}}</h1>
<h1>{{fullname}}</h1>
<button @click="changeData">changeData</button>
data: {
firstname: "ing",
lastname: "vue",
},
computed: {
},
methods: {
changeData() {
// this.fullname = "kk-大数据";
this.firstname = "kk";
},
},
__ 函数写法
computed: {
fullname() {
return this.firstname + "-" + this.lastname;
},
}
__ 对象写法
computed: {
fullname: {
get() {
return this.firstname + "-" + this.lastname;
},
set(val) {
// console.log(val);
let arr = val.split("-");
this.firstname = arr[0];
this.lastname = arr[1];
},
},
}
