vue part 11 - 技术栈

vuex的模块化与namespace

115_尚硅谷Vue技术_vuex模块化+namespace_1_哔哩哔哩_bilibili

116_尚硅谷Vue技术_vuex模块化+namespace_2_哔哩哔哩_bilibili

vue-router路由

很常见的很重要的应用：Ajax请求，将响应的数据替换掉原先的代码从而实现不跳转页面的情况下实现局部刷新

1.什么是路由？

1.一个路由就是一组映射关系（key---value）

key 为路径，value 可能是function 或 component

2.路由分类

1.后端路由：

1）理解：value 是function，用于处理客户端提交的请求。

2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处

理请求，返回响应数据。 2.前端路由：

1)理解：value 是component,用于展示页面内容。

2）工作过程：当浏览器的路径改变时，对应的组件就会显示。

基本路由

复制代码

npm i vue-rounter@3

和原来那样相同，都是vue3更新版本会报错

index.js

javascript 复制代码

//该文件专门用于创建整个应用的路由器

import VueRouter from "vue-router";
import About from "@/components/About";
import Home from '@/components/Home';

//创建并默认暴露一个路由器
export default new VueRouter({
   routes:[
       {
           path:'/about',
           component: About
       },
       {
           path:'/home',
           component: Home
       }
   ]
});

App.vue

router-link的特殊标签，实现路由切换

html 复制代码

<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">
          <!--原始使用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>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
}
</script>
<style lang="css" scoped>

</style>

main.js

javascript 复制代码

//引入Vue
import Vue from "vue";
//引入App
import App from './App';
//引入vue-router
import VueRouter from "vue-router";
import router from './router';

//关闭Vue的生产提示
Vue.config.productionTip = false;

//应用vue-router插件
Vue.use(VueRouter);

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

About.vue

html 复制代码

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>

Home.vue两个很相似

html 复制代码

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>
</style>

嵌套（多级）路由

shift + Tab 是往前缩进 Tab是往后缩进

路由路径的变化

路由传参

后端的问号传参，经典的，b站就使用了这个

传参的两种方式

命名路由

params参数

两种写法

props写法

javascript 复制代码

children:[
{
    name:'xiangqing',
    path:'detail',
    component:Detail,

    //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
    // props:{a:1,b:'hello'}
   
    //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组
    // props:true

    //props的第三种写法，值为函数I
    props($route){
        return{
            id:$route.query.id,
            title:$route.query.title
        }
    }

router-link

P125主要是什么？

编程式路由导航

缓存路由组件

如何在组件输入后，切换了不把组件销毁？

如果keep-alive 什么都不写，就代表此处展示的所有组件都保持活跃，因此include="News"来限定范围

多个缓存

html 复制代码

 <keep-alive :include="['News','Messages']">
    <router-view></router-view>
 </keep-alive>

两个新的生命周期钩子

提示: 这2个钩子函数需要配合 keep-alive 标签使用

128_尚硅谷Vue技术_两个新的生命周期钩子_哔哩哔哩_bilibili

路由守卫

保护路由安全，判断是不是的条件（权限）才能。

全局前置

前端把本地存储的jwt给安全框架认证，过了的话给一个返回值，根据返回值来跳转路由吧，编程式路由

全局后置

因为你还是在让服务器控制页面的跳转。完全违背了前后端分离的初衷。这个已经超出了后端的工作范围，后端只保证数据安全：即让特定的人拿到特定的数据。而页面安全：即让特定的人访问特定的页面。是前端的工作。

P130

独享路由守卫

P131

组件内路由守卫

P132

hash和history

hsah是不会发给服务器的，还有history模式

hash是由#，但是history只要/即可，但是他在ie中难以使用

html 复制代码

npm run build

进行打包出来dist，（webpack）然后node express部署

bash 复制代码

npm init
然随便起个名字
atguigu_test_server

npm i express

写代码server.js
cli
node server

server.js

javascript 复制代码

const express = require('express')

const app = express()
app.use(express.static(__dirname+'/static'))

app.get('/person',(req,res)=>{
    res.send({
        name:'tom',
        age:18
    })
})

app.listen(5005,(err)=>{
    if(!err) console.log('服务器启动成功!')
})

发现history模式更麻烦，不如hash，因为刷新就cannot GET

如何解决？什么java库阿，后端的某些配合，nginx阿

但是此库可以解决部分问题

VUE UI组件库

最后两集懒得卡吗啊啊啊