一路由
1.什么路由
路由是一种对应关系
2.什么是后端路由
客户端请求的url地址和服务端对该地址的处理函数的对应关系
3.什么事前端路由
路由是歌剧不同的url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的 hash history
4.什么时候使用前端路由
在页面应用,大部分页面结构不变,值改变部分内容的时候使用
5前端路由有什么优缺点
优点：
用户体验好，不需要每次都从服务器全部获取，快速展现给用户
- 缺点：
- 不利于 SEO
- 使用浏览器的前进，后退键的时候会重新发送请求，没有合理利用缓存
- 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
二vue 中路由基本使用
1.通过script标签引入 vue-router
2.定义组件
3.实例化路由对象 new VueRouter
4.配置路由的规则
#/hoem--->组件
5.挂载路由
设置路由和vue的关系
6.渲染路由
router-view
router-link
三.路由高亮的2种写法
router-link-active
linkActiveClass:'active'
四.路由重定向、404
redirect```json { path: '/', redirect: '/home' }'```- 404```json { path: '*', component: NotFoundPage }'```
五路由传参
query #/home?name=fly&age=18- params #/home/fly/18 ```js { path: '/home/:name/:age', component: Home }' ```
六.路由编程式导航
this.$router.push()
七嵌套路由
```js { path: '/home', component: Home, children: [ { path: '/home/recomment', component: Recomment } ] }```
八.命名试图路由
path: '/',components: {default: Header,main: Main,footer: Footer}}```html<router-view></router-view><router-view name="main"></router-view><router-view name="footer"></router-view>```
九.路由的进阶
1.全局路由前置守卫
beforeEach
```js router.beforeEach((to, from, next) => {}); ```- afterEach()
2.全局路由后置守卫
afterEach()
js
router.afterEach(() => {} );....afterEach()
3.组件内置守卫
beforeEnter()
.....js
beforeRouteEnter(to, from, next){}
十.methods、watch、computed 有什么区别
1.methods: 适合用于业务逻辑处理
多次调用的时候不会缓存
2.watch：比较适合侦听单个数据，或者是路由
可以侦听实例上的任意属性
3.computed：适合计算多个属性的结果
可以缓存数据方便下次使用
十一watch 的两种用法
1.浅层侦听
watch: { // 浅层侦听 msg(newVal, oldVal) { console.log(newVal, oldVal); },
}
2.深度侦听
watch: {
// 设置深度侦听
obj: { handler(newVal, oldVal) { console.log(newVal, oldVal); },
// 开启深度侦听 deep: true, // 立即触发 immediate: true, }, },
