Vue基础学习

创建项目

npm create vue@latest

然后按照自己的需求进行选择即可

运行项目

"name": "vue_learn01",  
"version": "0.0.0",  
"private": true,  
"type": "module",  
"scripts": {  
  "dev": "vite",  
  "build": "run-p type-check \"build-only {@}\" --",  
  "preview": "vite preview",  
  "build-only": "vite build",  
  "type-check": "vue-tsc --build"  
},


npm run 项目名字(dev)

App组件认识与重新编写

main.ts

import './assets/main.css'  
  
import { createApp } from 'vue'  //创建app应用(盆)  
import App from './App.vue'    //引用APP组件(根)
  
createApp(App).mount('#app')   //创建前端的应用，并且挂载在app的容器里

重新编写，其实基本上大体不变

//引入creatApp用于创建应用  
import {createApp} from 'vue'  
//引入App根组件  
import App from './App.vue'  
  
createApp(App).mount('#app')

App.vue,主要要写3个东西，html，ts，css

<template>  
  <!--html-->  
  <div class="app">  
    <h1>      Hello  
    </h1>  
  </div></template>  
  
  
<script lang="ts">  
  //Js或者TS  
  export default {  
    name:"App"  
  }  
</script>  
  
<style>  
  /* 样式 */  .app{  
    background-color: white;  
    box-shadow: 0 0 10px;  
    border-radius: 10px;  
    padding: 20px;  
  }  
</style>

实现简单的组件

main.tx中内容不变·

App.vue中添加组件的内容并进行应用

创建components文件内的Person.vue,进行组件的编写

vue2语法实现

App.vue

<template>  
  <!--html-->  
  <div class="app">  
    <h1>      Hello <Person/>  
    </h1>  </div></template>  
  
  
<script lang="ts">  
  //Js或者TS  
  import Person from './components/Preson.vue'  //引入Person  
  export default {  
    name:"App",  //组件名  
    components:{Person}  //注册组件  
  }  
</script>  
  
<style>  
  /* 样式 */  .app{  
    background-color: white;  
    box-shadow: 0 0 10px;  
    border-radius: 10px;  
    padding: 20px;  
  }  
</style>

Person.vue

<script lang="ts">  
  export default {  
    name:'Person',  
    data() {  
        return{  
          name:"cat",  
          age:18,  
          tel:'11122223333'  
        }  
    },  
    methods:{  
      showTel(){  
        alert(this.tel)  
      },  
      changeName(){  
        this.name='folly'  
      },  
      changeAge(){  
        this.age+=1  
      }  
    }  
  }  
</script>  
  
<template>  
  <div class="person">  
    <h2>      姓名：{{name}}  
    </h2>  
    <h2>      年龄：{{age}}  
    </h2>  
    <button @click="changeName">修改名字</button>  
    <button @click="changeAge">修改年龄</button>  
    <button @click="showTel"> 查看联系方式</button>  
  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
</style>

vue3语法实现

Person.vue

<script lang="ts">  
  export default {  
    name:'Person',  
    setup() {  
      //setup函数中的this不存在  
      //数据  
      //此时naem age tel都不为响应式的  
      let name = 'cat'  
      let age =18  
      let tel = '111222333444'  
      //方法  
      function changeName(){  
          name = 'folly'  
      }  
      function changeAge(){  
        age+=age  
      }  
      function showTel(){  
        alert(tel)  
      }  
  
      return {name,age,changeName,changeAge,showTel}  
    },  
  }  
</script>  
  
<template>  
  <div class="person">  
    <h2>      姓名：{{name}}  
    </h2>  
    <h2>      年龄：{{age}}  
    </h2>  
    <button @click="changeName">修改名字</button>  
    <button @click="changeAge">修改年龄</button>  
    <button @click="showTel"> 查看联系方式</button>  
  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
</style>

App.vue

<template>  
  <!--html-->  
  <Person/>  
</template>  
  
  
<script lang="ts">  
  //Js或者TS  
  import Person from './components/Preson.vue'  //引入Person  
  export default {  
    name:"App",  //组件名  
    components:{Person}  //注册组件  
  }  
</script>

setup语法糖

在实际应用里，setup的return经常会忘记编写，于是简写语法糖就出现了

  
<script setup>  
  let a=666  
  </script>


相当于

setup(){
let a = 666
return {a}
}

修改后的Person.vue

<script lang="ts">  
  export default {  
    name:'Person',  
  }  
</script>  
  
<script setup lang="ts">  
  let name = 'cat'  
  let age =18  
  let tel = '111222333444'  
  //方法  
  function changeName(){  
    name = 'folly'  
  }  
  function changeAge(){  
    age+=age  
  }  
  function showTel(){  
    alert(tel)  
  }  
</script>  
  
<template>  
  <div class="person">  
    <h2>      姓名：{{name}}  
    </h2>  
    <h2>      年龄：{{age}}  
    </h2>  
    <button @click="changeName">修改名字</button>  
    <button @click="changeAge">修改年龄</button>  
    <button @click="showTel"> 查看联系方式</button>  
  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
</style>

怎么安装vue开发插件并应用

npm i vite-plugin-vue-setup-extend -D //安装想要的插件

在vite.config.ts中添加插件即可使用

import VueSetUp from 'vite-plugin-vue-setup-extend' //导入


VueSetUp()  //进行调用

完整vite.config.ts

import { fileURLToPath, URL } from 'node:url'  
  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
import vueDevTools from 'vite-plugin-vue-devtools'  
import VueSetUp from 'vite-plugin-vue-setup-extend'  
  
// https://vite.dev/config/  
export default defineConfig({  
  plugins: [  
    vue(),  
    vueDevTools(),  
    VueSetUp()  
  ],  
  resolve: {  
    alias: {  
      '@': fileURLToPath(new URL('./src', import.meta.url))  
    },  
  },  
})

这样即可使用name参数对组件进行命名，无需写两个script

<script lang="ts" setup name="Person111">  
  let name = 'cat'  
  let age =18  
  let tel = '111222333444'  
  //方法  
  function changeName(){  
    name = 'folly'  
  }  
  function changeAge(){  
    age+=age  
  }  
  function showTel(){  
    alert(tel)  
  }  
</script>

在vue3中实现动态数据

ref

在前面的简单组件中，我们使用vue2，和vue3都成功实现了Person组件，但是发现vue3中的方法和数据不能动态的展示到页面当中，在vue3中如果要让数据变为动态展示的，需要使用ref将数据进行包裹，并使用.value放到方法中要更改的数据当中

<script lang="ts" setup name="Person">  
  //导入ref  
  import {ref} from 'vue'  
  //使用ref包裹需要动态使用的数据  
  let name = ref('cat')  
  let age = ref(18)  
  let tel = '111222333444'  
  //方法  
  function changeName(){  
    //在方法中使用.value将数据进行更改  
    name.value = 'folly'  
  }  
  function changeAge(){  
    age.value+=1  
  }  
  function showTel(){  
    alert(tel)  
  }  
</script>

reactive

将对象类型变为响应式数据，使用reactive，用法和ref差不多

<script lang="ts" setup name="Person">  
  //数据  
  import {reactive} from "vue";  
  
  let car =reactive({brand:'奔驰',price:100})  
  //方法  
  function changePrice(){  
    car.price+=1  
  }  
  
</script>  
  
<template>  
  <div class="person">  
    <h2>一辆{{car.brand}}}汽车的价格为{{car.price}}万</h2>  
    <button @click="changePrice">修改汽车的价格</button>  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
</style>

toRefs和toRef

将一个reactive对象修改为多个ref数据

<script lang="ts" setup name="Person">  
import {reactive, toRefs} from "vue";  
  let person = reactive({  
    name:'flag',  
    age:15  
  })  
  let {name,age} = toRefs(person)  
  function changeName(){  
    name.value="flfl"  
  }  
  function changeAge(){  
    age.value+=1  
  }  
</script>  
  
<template>  
  <div class="person">  
    <h2>{{name}}</h2>  
    <h2>{{age}}</h2>  
    <button @click="changeName">修改name</button>  
    <button @click="changeAge">修改age</button>  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

计算属性computed

在vue中，计算属性是必不可少的东西，其作用在于将特定东西进行运算

实现代码

<script lang="ts" setup name="Person">  
  //引入计算属性和ref  
  import {ref,computed} from "vue";  
  let firstName = ref("folly")  
  let lastName = ref("cat")  
  // //只读计算属性  
  // let fullName = computed(()=>{  
  //   return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value  // })  //可写也可读的计算属性  
  let fullName = computed({  
    get(){  
      return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value  
    },  
    set(val){  
      const [str1,str2] = val.split('-')  
      firstName.value=str1  
      lastName.value=str2  
    }  
  })  
  function changeName(){  
    fullName.value='lll-lll'  
  }  
  
</script>  
  
<template>  
  <div class="person">  
    姓: <input type="text" v-model="firstName"> <br>  
    名: <input type="text" v-model="lastName"> <br>  
    全名: <span>{{fullName}}</span> <br>  
    <button @click="changeName">将全名改为lll-lll</button>  
  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

watch监视数据

• watch的作用：监视数据的变化
• 特点：Vue3中的watch数据可以监视下面四种数据

1. ref定义的数据
2. reactive定义的数据
3. 函数返回值(getter函数)
4. 一个由上面三种数据所组成的数组

监视ref定义的基本类型数据

<script lang="ts" setup name="Person">  
  import {ref,watch} from "vue"  
  let sum =ref(0)  
  
  function addsum(){  
    sum.value+=1  
  }  
  //监视与停止监视  
  const stopWatch =watch(sum,(newValue,oldValue)=>{  
    console.log('sum变化了',newValue,oldValue)  
    if (newValue>=10){  
      //当要停止监视是调用watch的返回值的stopWatch即可  
      stopWatch()  
    }  
  })  
  
</script>  
  
<template>  
  <div class="person">  
    <h1>情况一、监视ref定义的基本类型数据</h1>  
    <h2>当前求和为：{{sum}}</h2>  
    <button @click="addsum">点击sum加1</button>  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

监视ref定义的对象类型数据

<script lang="ts" setup name="Person">  
  import {ref,watch} from "vue"  
  let person = ref({  
    name:"folly",  
    age:18  
  })  
  
  function changeName(){  
    person.value.name='cat'  
  }  
  
  function changeAge(){  
    person.value.age+=1  
  }  
  
  function changePerson(){  
    person.value={name:"follycat",age: 1}  
  }  
  //监视, 监视ref定义的对象类型数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视  
  watch(person,(newValue,oldValue)=>{  
    console.log(person,newValue,oldValue)  
  },{deep:true,immediate:true}) //开启深度监视,开启立刻监视  
</script>  
  
<template>  
  <div class="person">  
    <h1>情况二、监视ref定义的对象类型数据</h1>  
    <h2>name:{{person.name}}</h2>  
    <h2>age:{{person.age}}</h2>  
    <button @click="changeName">changeName</button> <br>  
    <button @click="changeAge">changeAge</button> <br>  
    <button @click="changePerson">changePerson</button>  
  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

监视reactive所定义的对象类型数据

<script lang="ts" setup name="Person">  
  import {reactive,watch} from "vue"  
  let person = reactive({  
    name:"folly",  
    age:18  
  })  
  
  function changeName(){  
    person.name='cat'  
  }  
  
  function changeAge(){  
    person.age+=1  
  }  
  
  function changePerson(){  
    Object.assign(person,{name:'folly_cat',age:1})  
  }  
  //监视, 监视reactive定义的对象类型数据，且默认开启深度监视  
  watch(person,(newValue,oldValue)=>{  
    console.log(person,newValue,oldValue)  
  })  
</script>  
  
<template>  
  <div class="person">  
    <h1>情况三、监视reactive定义的对象类型数据</h1>  
    <h2>name:{{person.name}}</h2>  
    <h2>age:{{person.age}}</h2>  
    <button @click="changeName">changeName</button> <br>  
    <button @click="changeAge">changeAge</button> <br>  
    <button @click="changePerson">changePerson</button>  
  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

监视ref或reactive定义的对象类型数据中的某个属性

<script lang="ts" setup name="Person">  
  import {reactive,watch} from "vue";  
  
  //data  
  let person=reactive({  
    name:'folly',  
    age:18,  
    car:{  
      c1:'奔驰',  
      c2:'宝马'  
    }  
  })  
  
  //function  
  function changeName(){  
    person.name='cat'  
  }  
  function changeAge(){  
    person.age+=1  
  }  
  function changeFirstCar(){  
    person.car.c1="oooo"  
  }  
  function changeTwoCar(){  
    person.car.c2='BMW'  
  }  
  function changeAllCar(){  
    person.car={c1: '雅迪',c2: 'BBU'}  
  }  
  
  //watch监视一个getter函数，也就是返回值，当返回值为person.name时就相当于只监视person的Name属性  
  watch(()=>{return person.name},(newValue,oldValue)=>{  
    console.log('personName变化了',newValue,oldValue)  
  })  
  //监视对象类型的某个属性可以直接写person.car，也可以写函数，但是如果直接写person.car无法监视整个对象类型的变化，所以推荐写函数形式，并且加上deep:true这样既可以监视整个对象类型变化，也可以监视对象类型中的单个属性的变化  
  watch(()=>{return person.car},(newValue,oldValue)=>{  
    console.log('person.car变化了',newValue,oldValue)  
  },{deep:true})  
</script>  
  
<template>  
  <div class="person">  
    <h2>name:{{person.name}}</h2>  
    <h2>age:{{person.age}}</h2>  
    <h2>car:{{person.car.c1}}、{{person.car.c2}}</h2>  
    <button @click="changeName">changeName</button>  
    <button @click="changeAge">changeAge</button>  
    <button @click="changeFirstCar">changeFirstCar</button>  
    <button @click="changeTwoCar">changeTwoCar</button>  
    <button @click="changeAllCar">changeAllCar</button>  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

监视上述多个数据

<script lang="ts" setup name="Person">  
  import {reactive,watch} from "vue";  
  
  //data  
  let person=reactive({  
    name:'folly',  
    age:18,  
    car:{  
      c1:'奔驰',  
      c2:'宝马'  
    }  
  })  
  
  //function  
  function changeName(){  
    person.name='cat'  
  }  
  function changeAge(){  
    person.age+=1  
  }  
  function changeFirstCar(){  
    person.car.c1="oooo"  
  }  
  function changeTwoCar(){  
    person.car.c2='BMW'  
  }  
  function changeAllCar(){  
    person.car={c1: '雅迪',c2: 'BBU'}  
  }  
  
  //监视上述多个数据,监视name和c1  
  watch([()=>person.name,()=>person.car.c1],(newValue,oldValue)=>{  
    console.log('被监视了')  
  })  
</script>  
  
<template>  
  <div class="person">  
    <h2>name:{{person.name}}</h2>  
    <h2>age:{{person.age}}</h2>  
    <h2>car:{{person.car.c1}}、{{person.car.c2}}</h2>  
    <button @click="changeName">changeName</button>  
    <button @click="changeAge">changeAge</button>  
    <button @click="changeFirstCar">changeFirstCar</button>  
    <button @click="changeTwoCar">changeTwoCar</button>  
    <button @click="changeAllCar">changeAllCar</button>  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

watchEffect

也相当于监视，立即运行一个函数，同时响应式的追踪器依赖，并在依赖更改时重新执行该函数

<script lang="ts" setup name="Person">  
  import {ref,watchEffect,watch} from "vue";  
  let sum = ref(0)  
  let height = ref(100)  
  
  function addsum(){  
    sum.value+=1  
  }  
  function addHeight(){  
    height.value+=10  
  }  
  //  
  // watch([sum,height],(value)=>{  //   let [newSum,newHeight]=value  //   if (newSum>=10||newHeight>=200){  //     console.log('发送请求')  
  //   }  // })  
  //watchEffect  watchEffect(()=>{  
    if (sum.value>=10||height.value>=200){  
      console.log('发送请求')  
    }  
  })  
</script>  
  
<template>  
  <div class="person">  
    <h2>当height大于200，或sum大于10是向服务器发送请求</h2>  
    <h2>当前求和为:{{sum}}</h2>  
    <h2>height:{{height}}</h2>  
    <button @click="addsum">addsum</button>  
    <button @click="addHeight">addHeight</button>  
  </div>  
</template>  
  
<style scoped>  
.person{  
  background-color: skyblue;  
  box-shadow: 0 0 10px;  
  border-radius: 10px;  
  padding: 20px;  
}  
button{  
  margin: 0 5px;  
}  
li{  
  font-size: 20px;  
}  
</style>

路由

创建路由并暴露

index.tx

使用createRouter进行创建路由，createWebHistory创建一个history工作模式的路由器

// 引入createRouter  
import {createRouter,createWebHistory} from "vue-router";  
// 引入可能呈现的组件  
import Home from '@/components/Home.vue'  
import New from '@/components/New.vue'  
import About from '@/components/About.vue'  
  
// 创建路由器  
const router = createRouter({  
    history:createWebHistory(), //路由器的工作模式  
    routes:[{  
        path:'/home',  //路由  
        component:Home  //引用组件  
    },  
    {  
        path:'/new',  
        component:New  
    },  
    {  
        path:'/about',  
        component:About  
    }]  
})  
  
export default router  //暴露

使用路由

main.ts
使用app.use(router)进行使用指定路由器

//引入creatApp用于创建应用  
import {createApp} from 'vue'  
//引入App根组件  
import App from './App.vue'  
//引入路由器  
import router from "@/router";  
  
const app = createApp(App)  
// 使用路由器  
app.use(router)  
  
app.mount('#app')

主体样式导航栏等

app.vue

<template>  
  <div class="app">  
    <!-- 侧边导航栏 -->  
    <div class="sidebar">  
      <div class="logo">Logo</div>  
      <RouterLink to="/home" class="link">首页</RouterLink>  
      <RouterLink to="/new" class="link">新闻</RouterLink>  
      <RouterLink to="/about" class="link">关于</RouterLink>  
    </div>  
    <!-- 主内容区 -->  
    <div class="main-content">  
      <h2>Vue路由测试</h2>  
      <RouterView></RouterView>    </div>  </div></template>  
  
<script lang="ts" setup name="App">  
import { RouterView, RouterLink } from "vue-router";  
</script>  
  
<style scoped>  
/* 基本布局 */.app {  
  display: flex;  
  min-height: 100vh;  
  background-color: #f4f7fc;  
}  
  
/* 侧边导航栏样式 */.sidebar {  
  width: 230px;  
  background-color: #2c3e50;  
  color: white;  
  padding: 20px;  
  position: fixed;  
  left: 0;  
  top: 0;  
  bottom: 0;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);  
  border-right: 1px solid #34495e;  
}  
  
.sidebar .logo {  
  font-size: 1.8rem;  
  font-weight: bold;  
  color: #1abc9c;  
  margin-bottom: 30px;  
  text-align: center;  
  letter-spacing: 2px;  
}  
  
.sidebar .link {  
  text-decoration: none;  
  color: white;  
  font-size: 1.1rem;  
  padding: 12px 20px;  
  width: 100%;  
  text-align: left;  
  border-radius: 4px;  
  margin: 5px 0;  
  transition: background-color 0.3s ease, padding-left 0.3s ease;  
}  
  
.sidebar .link:hover {  
  background-color: #1abc9c;  
  padding-left: 30px;  
}  
  
.sidebar .link.active {  
  background-color: #16a085;  
}  
  
/* 主内容区域样式 */.main-content {  
  margin-left: 260px; /* 留出侧边栏的空间 */  padding: 20px;  
  flex-grow: 1;  
  background-color: #ffffff;  
  border-radius: 8px;  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
  min-height: 100vh;  
}  
  
h2 {  
  color: #34495e;  
  font-size: 2.4rem;  
  margin-bottom: 20px;  
}  
  
@media (max-width: 768px) {  
  .app {  
    flex-direction: column;  
  }  
  
  .sidebar {  
    width: 100%;  
    height: auto;  
    position: relative;  
    box-shadow: none;  
    border-right: none;  
  }  
  
  .main-content {  
    margin-left: 0;  
  }  
}  
</style>

路由器的工作模式

history模式

优点：URL更加每个，不带有#，更接近传统网站的URL
缺点：后期项目上线，需要服务器配合处理路径问题，否则刷新会有404错误

hash模式

优点：兼容性更好，因为不需要服务器端处理路径
缺点：URL带有#不太美观，并且在SEO优化方面相对较差

命名路由

将路由进行命名

// 引入createRouter  
import {createRouter,createWebHistory} from "vue-router";  
// 引入可能呈现的组件  
import Home from '@/components/Home.vue'  
import New from '@/components/New.vue'  
import About from '@/components/About.vue'  
  
// 创建路由器  
const router = createRouter({  
    history:createWebHistory(), //路由器的工作模式  
    routes:[{  
        name:'index',  
        path:'/home',  //路由  
        component:Home  //引用组件  
    },  
    {  
        name:'news',  
        path:'/new',  
        component:New  
    },  
    {  
        name:'about',  
        path:'/about',  
        component:About  
    }]  
})  
  
export default router  //暴露

<div class="sidebar">  
  <div class="logo">Logo</div>  
  <RouterLink to="/home" class="link">首页</RouterLink>  
  <RouterLink :to="{name:'news'}" class="link">新闻</RouterLink>  //以名字进行引用
  <RouterLink :to="{path:'about'}" class="link">关于</RouterLink>  //以对象进行path引用
</div>

嵌套路由

在vue中可以使用children进行下一级路由的编写

index.ts

// 引入createRouter  
import {createRouter,createWebHistory} from "vue-router";  
// 引入可能呈现的组件  
import Home from '@/components/Home.vue'  
import New from '@/components/New.vue'  
import About from '@/components/About.vue'  
import Detail from "@/components/Detail.vue";  
  
// 创建路由器  
const router = createRouter({  
    history:createWebHistory(), //路由器的工作模式  
    routes:[{  
        name:'index',  
        path:'/home',  //路由  
        component:Home  //引用组件  
    },  
    {  
        name:'news',  
        path:'/new',  
        component:New,  
        children:[  
            {  
                path:'detail',  
                component:Detail,  
                name:'detail'  
            }  
        ]  
    },  
    {  
        name:'about',  
        path:'/about',  
        component:About  
    }]  
})  
  
export default router  //暴露

new.vue

<script setup lang="ts">  
import { reactive } from "vue";  
import {RouterView} from "vue-router";  
  
const newList = reactive([  
  { id: 'ggg01', title: 'HHHHH', content: 'HHHACK' },  
  { id: 'ggg02', title: 'gigigi', content: 'HgggggK' },  
  { id: 'ggg03', title: 'gopgo', content: 'HHHHHKKKKKUU' }  
])  
</script>  
  
<template>  
  <div class="news">  
    <!--导航区-->  
    <ul>  
      <li v-for="news in newList" :key="news.id">  
        <RouterLink :to="{name:'detail'}">{{news.title}}</RouterLink>  
      </li>    </ul>  </div>  <!--展示区-->  
  <div class="news-content">  
    <RouterView></RouterView>  </div></template>  
  
<style scoped>  
/* 新闻列表样式 */.news {  
  margin: 20px;  
  padding: 10px;  
  background-color: #f9f9f9;  
  border-radius: 8px;  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
}  
  
.news ul {  
  list-style: none;  
  padding: 0;  
  margin: 0;  
}  
  
.news li {  
  background-color: #ffffff;  
  padding: 15px;  
  margin-bottom: 10px;  
  border-radius: 6px;  
  transition: background-color 0.3s ease;  
}  
  
.news li:hover {  
  background-color: #e0f7fa;  
}  
  
.news a {  
  text-decoration: none;  
  color: #34495e;  
  font-size: 1.1rem;  
  font-weight: bold;  
}  
  
.news a:hover {  
  color: #1abc9c;  
}  
  
/* 内容区域样式 */.news-content {  
  margin-top: 20px;  
  padding: 20px;  
  background-color: #ffffff;  
  border-radius: 8px;  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
}  
  
</style>

Detail.vue

<script setup lang="ts">  
  
</script>  
  
<template>  
  <ul class="new-list">  
    <li>标题:</li>  
    <li>内容:</li>  
  </ul></template>  
  
<style scoped>  
  
</style>

query参数

New.vue

<script setup lang="ts">  
import { reactive } from "vue";  
import {RouterView} from "vue-router";  
  
const newList = reactive([  
  { id: 'ggg01', title: 'HHHHH', content: 'HHHACK' },  
  { id: 'ggg02', title: 'gigigi', content: 'HgggggK' },  
  { id: 'ggg03', title: 'gopgo', content: 'HHHHHKKKKKUU' }  
])  
</script>  
  
<template>  
  <div class="news">  
    <!--导航区-->  
    <ul>  
      <li v-for="news in newList" :key="news.id">  
        <RouterLink :to="{name:'detail',query:{content:news.content,title:news.title}}">{{news.title}}</RouterLink>  
      </li>    </ul>  </div>  <!--展示区-->  
  <div class="news-content">  
    <RouterView></RouterView>  </div></template>  
  
<style scoped>  
/* 新闻列表样式 */.news {  
  margin: 20px;  
  padding: 10px;  
  background-color: #f9f9f9;  
  border-radius: 8px;  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
}  
  
.news ul {  
  list-style: none;  
  padding: 0;  
  margin: 0;  
}  
  
.news li {  
  background-color: #ffffff;  
  padding: 15px;  
  margin-bottom: 10px;  
  border-radius: 6px;  
  transition: background-color 0.3s ease;  
}  
  
.news li:hover {  
  background-color: #e0f7fa;  
}  
  
.news a {  
  text-decoration: none;  
  color: #34495e;  
  font-size: 1.1rem;  
  font-weight: bold;  
}  
  
.news a:hover {  
  color: #1abc9c;  
}  
  
/* 内容区域样式 */.news-content {  
  margin-top: 20px;  
  padding: 20px;  
  background-color: #ffffff;  
  border-radius: 8px;  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
}  
  
</style>

Detail.vue

<script setup lang="ts">  
import {useRoute} from "vue-router";  
let route = useRoute()  
</script>  
  
<template>  
  <ul class="new-list">  
    <li>标题:{{route.query.title}}</li>  
    <li>内容:{{route.query.content}}</li>  
  </ul></template>  
  
<style scoped>  
  
</style>

params参数

params需要提前占位
index.ts

children:[  
    {  
        path:'detail/:title/:content',  
        component:Detail,  
        name:'detail'  
    }

news.vue

<li v-for="news in newList" :key="news.id">  
  <RouterLink :to="{name:'detail',params:{title:news.title,content:news.content}}">{{news.title}}</RouterLink>  
</li>

Detail.vue

<script setup lang="ts">  
import {useRoute} from "vue-router";  
let route = useRoute()  
</script>  
  
<template>  
  <ul class="new-list">  
    <li>标题:{{route.params.title}}</li>  
    <li>内容:{{route.params.content}}</li>  
  </ul></template>  
  
<style scoped>  
  
</style>

重定向

使用redirect进行重定向

const router = createRouter({  
    history:createWebHistory(), //路由器的工作模式  
    routes:[{  
        name:'index',  
        path:'/home',  //路由  
        component:Home  //引用组件  
    },  
    {  
        name:'news',  
        path:'/new',  
        component:New,  
        children:[  
            {  
                path:'detail/:title/:content',  
                component:Detail,  
                name:'detail'  
            }  
        ]  
    },  
    {  
        name:'about',  
        path:'/about',  
        component:About  
    },  
    {  
        path:'/',  
        redirect:'/home'  
    }]

原文地址：https://blog.csdn.net/2301_80148821/article/details/145266182

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！