尚硅谷全新JavaWeb教程，企业主流javaweb技术栈【学习笔记】四

昔柯的修炼日记

已于 2024-09-02 12:03:32 修改

阅读量363

点赞数 11

文章标签： vue.js javascript 前端

于 2024-06-26 15:06:20 首次发布

本文链接：https://blog.csdn.net/qq_43668996/article/details/139989605

版权

尚硅谷全新JavaWeb教程，企业主流javaweb技术栈【学习笔记】一_尚硅谷企业级javaweb的文本-CSDN博客

尚硅谷全新JavaWeb教程，企业主流javaweb技术栈【学习笔记】二_尚硅谷javaweb笔记-CSDN博客

尚硅谷全新JavaWeb教程，企业主流javaweb技术栈【学习笔记】下_尚硅谷全新javaweb教程,企业主流javaweb技术栈下载-CSDN博客

一部分代码： https://download.csdn.net/download/qq_43668996/89066620

二部分代码： https://download.csdn.net/download/qq_43668996/8909402

六、Vue3视图渲染技术

6.1模版语法

ve 使用一种基于 HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 vue 模板都是语法层面合法的HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Ve 会将模板编译成高度优化的Javascript 代码。结合响应式系统，当应用状态变更时，ve 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

6.1.1 插值表达式和文本渲染

插值表达式:最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法,即双大括号{{}}

插值表达式是将数据渲染到元素的指定位置的手段之一
插值表达式不绝对依赖标签,其位置相对自由
插值表达式中支持iavascript的运算表达式
插值表达式语法 {{数据名字/函数/对象调用API}}

1 数据名字

<h1>{{ msg }}</h1>
msg的值为 {{ msg }}<br>

2 函数

msg的值为{{getMsg()}}<br>

3 运算符

年龄:{{ age }}，是否成年:{{ age >18 ?'是':'否'}}<br>

4 API

{{bee.split('').reverse().join('')}} <br>
{{carts[0].price*carts[0].number + carts[1].price*carts[1].number }} <br>
{{ compute()}}<br>

<script setup>
/*插值表达式 语法 {{数据名字/函数/对象调用API}}
  插值表达式 不依赖标签，可以在没有标签的情况下独立使用
*/
// 定义一些常见类型的数据
let msg = "hello vue3"
let getMsg=()=>{
  return "hello vue3 message"
}
let age = 19
let bee ="蜜 蜂"
let carts=[{name:"可乐",price:3,number:10},{name:"薯片",price:6,number:8}]
// 定义一个获得购物车商品总金额的一个方法
function compute(){
  let count= 0
  for(let index in carts){
    count += carts[index].price *carts[index].number
  }
  return count
}
</script>

<template>
  <div>
    <!--将数据绑定到下面的元素上-->
    <h1>{{ msg }}</h1>
    msg的值为 {{ msg }}<br>
    <!--插值表达式中可以调用函数,将函数的返回值渲染到指定的位置-->
    msg的值为{{getMsg()}}<br>
    <!--插值表达式支持一些常见的运算符-->
    年龄:{{ age }}，是否成年:{{ age >18 ?'是':'否'}}<br>
    <!--插值表达式中支持对象调用一些API-->
    {{bee.split('').reverse().join('')}}    <br>
    {{carts[0].price*carts[0].number + carts[1].price*carts[1].number }} <br>
    {{ compute()}}<br>
  </div>
</template>

<style scoped>

</style>

文本渲染命令

v-text v-text 不识别html结构的文本 innerText
v-html 识别文本中的html代码的命令 innerHTML
插值表达式不依赖标签，可以在没有标签的情况下独立使用
v-*** vue的指令命令必须依赖标签，在开始标签中使用
- 命令支持字符串模板
- 命令中支持常见的运算符
- 命令中支持常见对象的API的调用
- 命令中支持函数的调用

<script setup>
/*
v-text v-text 不识别html结构的文本  innerText
v-html 识别文本中的html代码的命令   innerHTML
  插值表达式 语法 {{数据名字/函数/对象调用API}}
  插值表达式 不依赖标签，可以在没有标签的情况下独立使用
  v-*** vue的指令
   1 命令必须依赖标签，在开始标签中使用
*/
// 定义一些常见类型的数据
let msg = "hello vue3"

/*命令支持字符串模板*/
let haha = "haha"
let msg2 =`hello ${haha}`
/*命令中支持常见的运算符*/
let age =19
/*命令中支持常见对象的API的调用*/
let bee="蜜蜂"
/*命令中支持函数的调用*/
let getMsg=()=>{
  return "hello vue3 message"
}
let fontMsg="<font color='red'>你好</font>"
</script>

<template>
  <div>
    <!--将数据绑定到下面的元素上-->
    <h1 v-text="msg"></h1>
    <h1 v-text="msg2"></h1>
    <h1 v-text="`你好 ${haha}`"></h1>
    <h1 v-text="age>= 18 ?'成年':'未成年'"></h1>
    <h1 v-text="bee.split('').reverse().join('-')"></h1>
    <h1 v-text="getMsg()"></h1>
    <h1 v-text="fontMsg"></h1>
    <h1 v-html="fontMsg"></h1>
  </div>
</template>

<style scoped>

</style>

6.1.2 属性渲染命令

// 属性渲染命令
v-bind 将数据绑定到元素的属性上
1 v-bind:属性名="数据名"
2 :属性名="数据名" （v-bind可省略）

<script setup>
// 属性渲染命令
// v-bind 将数据绑定到元素的属性上
// v-bind:属性名="数据名"
// :属性名="数据名"
// 
const data={logo:"http://www.atguigu.com/images/index_new/logo.png",
name:"尚硅谷",
url:"http://www.atguigu.com"
}

</script>

<template>
  <div>
    <a v-bind:href="data.url">
      <img v-bind:src="data.logo" v-bind:title="data.name">
    </a>
  </div>
</template>

<style scoped>

</style>

6.1.3 事件的绑定

我们可以使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 vue的JavaScript代码。

用法:v-on:click="handler"或简写为 @click="handler
vue中的事件名=原生事件名去掉on前缀如:onclick --> click
handler的值可以是方法事件处理器,也可以是内联事件处理器
绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
- .once: 只触发一次事件。[重点]
- .prevent: 阻止默认事件。[重点]
- .stop: 阻止事件冒泡。
- .capture: 使用事件捕获模式而不是冒泡模式。
- .self: 只在事件发送者自身触发时才触发事件。

<script setup>
    // v-on:事件名称="函数名()"
    // v-on:事件名可以简写 @事件名
    // 原生js的事件名是 on***  onclick  ondbclick onblur onfocus
    // vue中的事件名去掉on  click  dbclick blur  focus
    function fun1(){
    alert("hi")}
    let counter =ref(1)
    function fun2(){
    counter.value++}
    function fun3(event){
      let flag =confirm("确定要访问目标链接吗")
      if(!flag){
      //原生js编码方式阻止组件的默认行为
      event.preventDefault()}
    }
    function fun4(){
      alert("超链接被点击了")}
</script>

<template>
  <div>

    <!--事件的绑定函数-->
    <button v-on:click="fun1()" >hello</button>
    <button v-on:click="fun2()">+</button>
    <!--内联事件处理器-->
    <button v-on:click="counter++" >+</button>
    <!--事件的修饰符 .once 事件只绑定一次 prevent 修饰符阻止组件的默认行为-->
    <button v-on:click.once="counter++" >+</button>
    {{ counter }}
    <br>
    <a href="http://www.atguigu.com" v-on:click="fun3($event)">尚硅谷</a>
    <a href="http://www.atguigu.com" v-on:click.prevent="fun4()">尚硅谷</a>
 
  </div>
</template>

<style scoped>

</style>

6.2 响应式基础

此处的响应式是指:数据模型发生变化时,自动更新DOM树内容,页面上显示的内容会进行同步变化,wue3的数据模型不是自动响应式的,需要我们做一些特殊的处理

6.2.1 响应式需求案例

需求:实现 +-按钮,实现数字加一减

让一个普通数据转换为响应式数据两种方式

1 ref函数更适合单个变量

在script标签中操作ref响应式数据要通过.value
在template中操作ref响应式数据则无需.value
2 reactive函数更适合对象

toRef函数将reactive响应式数据中的某个属性转换为ref响应式数据
toRefs函数同时将reactive响应式数据中的多个属性转换为ref响应式数据

<script setup>
import {ref,reactive,toRef,toRefs} from 'vue'
/*让一个普通数据转换为响应式数据 两种方式
1 ref函数 更适合单个变量
    在script标签中操作ref响应式数据要通过.value
    在template中操作ref响应式数据则无需.value
2 reactive函数 更适合对象

// toRef函数 将reactive响应式数据中的某个属性转换为ref响应式数据
    toRefs函数 同时将reactive响应式数据中的多个属性转换为ref响应式数据
*/
let  counter = ref(10)

let person = reactive({
  name:'',
  age:10
})
function incrAge(){
  person.age++

}
function incr(){
  counter.value++
}
let p_age = toRef(person,"age")
function incrRefAge(){
  p_age.value++
}
let {name,age} = toRefs(person)
function incrRefAge2(){
  age.value++
}

</script>

<template>
  <div>
      <button @click="incr()"> + </button>
      <button @click="counter++"> + </button>
      {{ counter }}
      <hr>
      <button @click="incrAge()"> + </button>
      <button @click="person.age++"> + </button>
      {{ person.age }}
      <button @click="incrRefAge"> + </button>
      <button @click="incrRefAge2"> + </button>
      {{ person.age }}
      {{ p_age }}
  </div>
</template>

<style scoped>

</style>

6.3 条件和列表渲染

6.3.1 条件渲染

v-if 条件渲染

v-if='表达式'只会在指令的表达式返回真值时才被渲染!
也可以使用 v-else 为 v-if 添加一个“else 区块”
一个v-else 元素必须跟在一个 v-if 元素后面，否则它将不会被识别。

v-show 条件染扩展:

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样:
不同之处在于 v-show 会在 DOM 渲染中保留该元素; v-show 仅切换了该元素上名为 display 的 CSS 属性
v-show 不支持在<template>元素上使用，也不能和 v-else 搭配使用。

<script setup>
    import {ref} from 'vue'
    let flag = ref(ture)
//  v-if ="表达式/数据"数据为true 则当前元素会渲染进入dom树
//  v-else 自动和前一个v-if做取反操作
// v-show = "" 数据为ture
// v-if 数据为false时，元素则不再dom树中了
// v-show 数据为false是,元素仍在dom树中,通过display的css样式控制元素隐藏
</script>

<template>
  <div>
      <h1 id="ha" v-if="flag"> vue is awesome </h1>
      <h1 id="hb" v-else> vue is awesome </h1>
      <h1 id="hc" v-show="flag"> hhhhhhh </h1>
      <button @click="flag=!flag">toggle</button>
  </div>
</template>

<style scoped>

</style>

6.3.2 列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。

v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
在 v-for 块中可以完整地访问父作用域内的属性和变量。 v-for 也支持使用可选的第二个参数表示当前项的位置索引。

<script setup>
/*让一个普通数据转换为响应式数据 两种方式
1 ref函数 更适合单个变量
    在script标签中操作ref响应式数据要通过.value
    在template中操作ref响应式数据则无需.value
2 reactive函数 更适合对象
*/
import { ref,reactive } from 'vue';
let  carts = reactive([{
  number:8,
  name:"薯片",
  price:2
},{
  number:4,
  name:"可乐",
  price:3

},{
  number:13,
  name:"炸鸡",
  price:7
  
}])
let  items = reactive([{
  id:"item1",
  message:"薯片"
},{
  id:"item2",
  message:"可乐"
},{
  id:"item3",
  message:"炸鸡"
}])
let pro = ref("产品")
//计算购物车总金额函数
function compute(){
  let total = 0
  for(let index in carts){
    total+=carts[index].number*carts[index].price
  }
  return total
}
//从购物车中移除购物项
function removeCart(index){
  carts.splice(index,1)
}
//清空购物车的方法
function clearCart(){
  //调用Api清除
  carts.splice(0,carts.length)
}
</script>

<template>
  <div>
    <h1>您的购物车如下</h1>
    <table border="1px">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <!--购物车有项目时渲染-->
      <tbody v-if="carts.length>0">
        <tr v-for="(cart,index) in carts" v-bind:key="index">
          <td v-text="index+1"></td>
          <td v-text="cart.name"></td>
          <td v-text="cart.number"></td>
          <td v-text="cart.price"></td>
          <td v-text="cart.price*cart.number"></td>
          <td><button @click="removeCart(index)">删除</button></td>
        </tr>
      </tbody>
      <!--购物车无项目时渲染-->
      <table v-else>
        <tr>
          <td colspan="6">购物车空了</td>
        </tr>
      </table>
    </table>
      购物车总金额{{ compute() }}
      <button @click="clearCart()">清空购物车</button>
    <hr>
    <ur>
    <li v-for="item in items" v-bind:key="item.id"> <!-- <li v-for="(item,index) in items" v-bind:key="item.id">  -->
       {{pro}}{{index+1}}{{ item.message }} 
    </li>
    </ur>
  </div>

  
</template>

<style scoped>

</style>

6.4 双向绑定

单项绑定响应式数据发生变化时，更新dom树用户的操作如果造成页面内容的改变不会影响响应式数据
双向绑定 v-model页面上的数据由于用户的操作造成了改变,也会同步修改对应的响应式数据
- 双向绑定一般都用于表单标签
- 双向绑定也有人称呼为收集表单信息的命令
- y-mode1:value="数据" 双向绑定。v-model:value 一般都省略 :value
- v-model还可以用于各种不同类型的输入，<textarea>、<select>元素。

<script setup>
// 单项绑定 响应式数据发生变化时，更新dom树用户的操作如果造成页面内容的改变不会影响响应式数据
// 双向绑定 v-model页面上的数据由于用户的操作造成了改变,也会同步修改对应的响应式数据
//         双向绑定一般都用于表单标签
//         双向绑定也有人称呼为收集表单信息的命令
//         y-mode1:value="数据" 双向 绑定
//         v-model:value 一般都省略 :value
  import {ref,reactive} from 'vue'
  let message = ref('zhangsan')
  let user = reactive({
    username:"",
    userPwd:"",
    intro:"",
    pro:""
  })
  let hbs = ref([])
  function clearForm(){
    user.username=""
    user.userPwd=""
    user.intro=""
    user.pro=""
  }
</script>

<template>
  <div>
    <input type="text" v-model="user.username"><br>
    <input type="password" v-model="user.userPwd"><br>
    爱好：
      唱 <input type="checkbox" v-model="hbs" value="sing"><br>
      跳 <input type="checkbox" v-model="hbs" value="dance"><br>
      rap <input type="checkbox" v-model="hbs" value="rap"><br>
   
    <br>
    简介：<textarea v-model="user.intro"></textarea>
    <select v-model="user.pro">
      <option value="1">京</option>
      <option value="2">津</option>
      <option value="3">冀</option>
    </select>
    <button @click="clearForm()">清除 </button>

    {{ user }}
    {{ hbs }}
  </div>

  
</template>

<style scoped>
</style>

6.5 属性计算

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象:

<script setup>
  import { reactive,computed } from 'vue';
  const author =reactive({
    name:"张二",
    books:["java从入门到精通","算法","Mysql"]
  })

  //通过方法返回数据 每使用一次 执行一次
  function hasBooks(){
    console.log("hasbooks")
    return author.books.length>0 ?"是":"否"
  }

  //通过计算属性获得数据 每次使用是,如果和上次使用时,数据没有变化,则直接使用上一次的结果
  let bookMessage= computed(()=>{
    console.log("bookMessage")
    return author.books.length>0 ?"是":"否"
  })
</script>

<template>
  <div>
    <p>作者：{{ author.name }}</p>
    是否出版过图书{{ hasBooks() }}<br>
    是否出版过图书{{ hasBooks() }}<br>
    是否出版过图书{{ hasBooks() }}<br>
    是否出版过图书{{ bookMessage }}<br>
    是否出版过图书{{ bookMessage }}<br>
    是否出版过图书{{ bookMessage }}<br>
  </div>

  
</template>

6.6 数据监听器

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”:例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数:

watch主要用于以下场景:
- 当数据发生变化时需要执行相应的操作
- 监听数据变化，当满足一定条件时触发相应操作
- 在异步操作前或操作后需要执行相应的操作

监控响应式数据(watch):

<script setup>
  import {ref,reactive,watch,watchEffect} from 'vue'
  let fullname = ref("")
  let firstname = ref("")
  let lastname = reactive({
    name:"看"
  })
  //任何的响应式数据,如果想监听,直接监听即可,无需将要监听的响应式数据作为参数
  watchEffect(()=>{
    fullname.value=firstname.value+lastname.name})

  //watch函数监听一个ref的响应式数据
  watch(firstname,(newValue,oldValue)=>{
    console.log(`${oldValue}变为${newValue}`)
    fullname.value=newValue+lastname
  })
//watch函数监听一个reactive的响应式数据 专门监听reactive响应式数据中的一个属性
  // watch(()=>lastname.name,(newValue,oldValue)=>{
  //   console.log(`${oldValue}变为${newValue}`)
  //   fullname.value=newValue+lastname.name
  // })

  //watch函数监听一个reactive的响应式数据 监听reactive响应式数据中的所有属性
  watch(()=>lastname,(newValue,oldValue)=>{
    fullname.value=firstname.value+lastname.name
  },{deep:true,immediate:true})
</script>

<template>
  <div>
    姓氏：<input type="text" v-model="firstname"> <br>
    名字  <input type="text" v-model="lastname.name"> <br>
    全名：{{fullname}} <br>
  </div>

  
</template>

6.7.Vue生命周期

6.7.1 生命周期简介

每个 vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周钩子的函数，让开发者有机会在特定阶段运行自己的代码!

周期图解:

常见钩子函数
- onMounted() 注册一个回调函数，在组件挂载完成后执行
- onUpdated(）注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
- onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。
- onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。
- onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用
- onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。

6.7.2 钩子函数测试

<script setup>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from 'vue'
  //挂载之前
  onBeforeMount(()=>{
    console.log("----- onBeforeMount--------------")
  })
  //挂载完成
  onMounted(()=>{
    console.log("-----onMounted --------------")
  })
  //更新之前
  onBeforeUpdate(()=>{
    console.log("-----onBeforeUpdate --------------")
    let ele = document.getElementById("s1")
    console.log(message.value,ele.innerText)
  })
  //更新完成
  onUpdated(()=>{
    console.log("----- onUpdated--------------")
    let ele = document.getElementById("s1")
    console.log(message.value,ele.innerText)
  })
  let message = ref(1)

</script>

<template>
  <div>
    <span id ="s1">{{ message }}</span>
    <button @click="message++">+</button>
  </div>

  
</template>

6.8 Vue组件

6.8.1 组件基础

在实际应用中，组件常常被组织成层层嵌套的树状结构:组件允许我们将 U1划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。组件就是实现应用中局部功能代码和资源的集合!

这和我们嵌套 HTML 元素的方式类似，vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

传统方式编写应用:

App.vue

<script setup>
//  引入多个 .vue文件
import Header from './components/Header.vue';
import Content from './components/Content.vue';
import Navigator from './components/Navigator.vue';
</script>

<template>
  <div>
    <Header class="header"> </Header>
    <Navigator class="navigator"> </Navigator>
    <Content class="content"> </Content>
  </div>

</template>

<style scoped>
  .header{
    height: 80px;
    width: 800px;
    border: 1px solid red;
  }
  .navigator{
    width: 20%;
    height: 800px;
    border: 1px solid green;
    float: left;
  }
  .content{
    width: 79%;
    height: 800px;
    border: 1px solid blue;
    float: right;
  }
</style>

Navigator.vue

<script setup>

</script>

<template>
  <div>
    <ul>
        <li>学员管理</li>
        <li>图书管理</li>
        <li>请假管理</li>
        <li>班级管理</li>
        <li>教师管理</li>
    </ul>
  </div>

</template>

<style scoped>

</style>

Header.vue


<script setup>

</script>

<template>
  <div>
    欢迎：XXX <a href="#">退出登录</a>
  </div>

</template>

<style scoped>

</style>

Content.vue

<script setup>

</script>

<template>
  <div>
    这里是主要内容
  </div>

</template>

<style scoped>

</style>

6.8.2 组件之间传递数据

子传父

//向父组件发送参数
// defineEmits用于定义向父组件提交数据的事件以及正式的提交数据
import { defineEmits } from 'vue';
//定义一个向父组件提交数据的事件事件名称自定义
const emits = defineEmits(["sendMenu"])

//提交数据的方法
function send(data) {
emits("sendMenu",data)}

<script setup>

//向父组件发送参数
// defineEmits用于定义向父组件提交数据的事件以及正式的提交数据
import { defineEmits } from 'vue';
//定义一个向父组件提交数据的事件 事件名称自定义
const emits = defineEmits(["sendMenu"])

//提交数据的方法
function send(data) {
  emits("sendMenu",data)
    
}
</script>

<template>
  <div>
    <ul>
        <li @click="send('学员管理')">学员管理</li>
        <li @click="send('图书管理')">图书管理</li>
        <li @click="send('请假管理')">请假管理</li>
        <li @click="send('班级管理')">班级管理</li>
        <li @click="send('教师管理')">教师管理</li>
    </ul>
  </div>

</template>

<style scoped>

</style>

父传子

<script setup>
//接收父组件的参数
import { defineProps } from 'vue';
defineProps({
  message:String
})
</script>

<template>
  <div>
    {{message}}
  </div>

</template>

<style scoped>

</style>

七 Vue路由机制router

7.1路由简介

1 什么是路由?

定义:路由就是根据不同的 URL地址展示不同的内容或页面
通俗理解:路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。

2 路由的作用

单页应用程序(SPA)中，路由可以实现不同视图之间的无刷新切换，提升用户体验;
路由还可以实现页面的认证和权限控制，保护用户的隐私和安全;
路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

7.2 路由入门案例

1 案例需求分析

2 创建项目和导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-routei@4 --save //安装全局的vue-router 4版本

3 准备页面和组件

使用 npm create vite 创建新文档 demo12-vue，并使用npm i 下载依赖

使用 npm install vue-router 命令下载路由依赖

首先创建基础.vue :

<script setup>
import { ref } from 'vue'

</script>

<template>
  <h1>home</h1>
</template>

<style scoped>

</style>

<script setup>
import { ref } from 'vue'

</script>

<template>
  <h1>home</h1>
</template>

<style scoped>

</style>

<script setup>
import { ref } from 'vue'

</script>

<template>
  <h1>list</h1>
</template>

<style scoped>

</style>

<script setup>
import { ref } from 'vue'

</script>

<template>
  <h1>update</h1>
</template>

<style scoped>

</style>

配置路由以及对应路径，并向外暴露

// 导入 创建路由对象需要使用的函数
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue'
import Add from '../components/Add.vue'
import List from '../components/List.vue'
import Update from '../components/Update.vue'
//创建一个路由对象
const router = createRouter({
    //history属性用于记录路由的历史
    history:createWebHashHistory(),
    //用于定义多个不同的路径和组件之间的对应关系
    routes:[
        {
            path:"/home",
            component:Home
        },
        {            
            path:"/list",
            component:List},
        {            
            path:"/add",
            component:Add},
        {            
            path:"/update",
            component:Update},
        {            
            path:"/",
            component:Home}
    ]
})
//向外暴露router
export default router

在主页面通过<router-view></router-view> <router-link to="/home"></router-link>定义替换位置以及替换模式

<script setup>

</script>

<template>
  <div>
    <!--该标签会被替换成具体的.vue,替换目标由导航栏输入路径决定-->
    <router-view></router-view>
    <!--该标签可在页面展示，通过点击不同标签进行vue切换，并且路径转换-->
    <router-link to="/home"> home页</router-link><br>
    <router-link to="/list"> List页</router-link><br>
    <router-link to="/add"> Add页</router-link><br>
    <router-link to="/update"> Update页</router-link><br>

  </div>
</template>

<style scoped>

</style>

将定义好的路由挂载到app上

import { createApp } from 'vue'

import App from './App.vue'
import router from './router/router.js'
const app = createApp(App)
app.use(router)
app.mount('#app')

7.3 路由重定向以及其他细节

一个视图上是可以同时存在多个router-view每个router-view 都可以设置专门用展示哪个组件
<router-view></router-view>
一般来说,一个.vue中几乎只会用一个router-view标签就可以满足%99的业务要求

首先为每个router-view 定义不同的名字

<script setup>

</script>

<template>
  <div>
    <router-view></router-view><hr>
    <!--该标签可在页面展示，通过点击不同标签进行vue切换，并且路径转换-->
    <router-link to="/home"> home页</router-link><hr>
    <router-link to="/list"> List页</router-link><hr>
    <router-link to="/add">  Add页</router-link><hr>
    <router-link to="/update"> Update页</router-link><hr>
    <!--该标签会被替换成具体的.vue,替换目标由导航栏输入路径决定-->
    
    home页<router-view name="homeView"> </router-view><hr>
    List页<router-view name="listView"></router-view><hr>
    Add页 <router-view name="addView"></router-view><hr>
  </div>
</template>

<style scoped>

</style>

接着定义多个不同的路径和组件之间的对应关系，此处每个路径对应组件使用components定义（上面为component）,其花括号内可定义
- default: 对应vue（router-view未定义名字时，展示）
- 名字：对应vue(展示router-view定义名字处)。

// 导入 创建路由对象需要使用的函数
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue'
import Add from '../components/Add.vue'
import List from '../components/List.vue'
import Update from '../components/Update.vue'
//创建一个路由对象
const router = createRouter({
    //history属性用于记录路由的历史
    history:createWebHashHistory(),
    //用于定义多个不同的路径和组件之间的对应关系
    routes:[
        {
            path:"/home",
            components: {
                default:Home,
                homeView:Home
            }
           
        },
        {            
            path:"/list",
            components: {
                default:List,
                listView:List
            }},
        {            
            path:"/add",
            components: {
                default:Add,
                addView:Add
            }},
        {            
            path:"/update",
            component: Update
            },
        {            
            path:"/",
            component:Home},
        {            
            path:"/showHome",
            component:Home}
    ]
})
//向外暴露router
export default router

..........................更新中.....................................................

昔柯的修炼日记

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
尚硅谷全新JavaWeb教程，企业主流javaweb技术栈【学习笔记】四

一部分代码： https://download.csdn.net/download/qq_43668996/89066620二部分代码： https://download.csdn.net/download/qq_43668996/8909402。
复制链接

扫一扫