一:路由组件
1.新建一个组件命名为header.vue
声明式
<template>
<div class="content">
<header>
//使用组件
</header>
</div>
</template>
<script>
import Header from ' . /Header.vue
//1.导入文件.
export default {
name:' App',
data(){
return{
....
}
},
methods: {
components :{
//2.放置使用的组件名
Header
}
}
</script>
2、将父组件的内容传递给子组件
//父组件
<header :content="msg">
</header>
data(){
return{
msg:"父传子路由传递"
}
},
子组件
<template>
<h1>这是头部组件</h1>
<h2>{{content}}</h2>
</ template>
<script>
export default {
//接收值
props: ["content"]
}
</script>
3、将子组件的内容传递父组件
<template>
<button @click="sendMessage"> 按钮</button>
</template>
<script>
export default {
1.触发事件
data(){
return{
message:"子传父路由传递"
}
},
methods:{
sendMessage: function(){
this.$emit("sendchlidFn",this.message);
2、定义触发事件函数,给父组件传递参数
}
}
}
</script>
<template>
<div class="content">
<header :content="msg"></header>
//3.声明自定义事件函数,执行父元素方法
<end @sendchlidFn="sendchlidFn"/>
//5.接受数据
<h3>{{getchlidvalue}}</h3>
</div>
</template>
<script>
import header from './header.vue
import end from './end.vue
export default {
name:' App',
data(){
return{
msg:"父传子路由传递"
getchlidvalue:"子组件显示数据"
}
},
methods: {
components:{
Header
},
4.参数赋值给变量
sendchlidFn: function(value){
this.getchlidvalue = value
}
}
</script>
二、声明周期函数
<template>
<div class="content">
</div>
</template>
<script>
//声明式
export default {
name: 'App',
data(){
return{
}
},
beforeCreate(){
console.log("初始化数据之前")
},
created(){
console.log("数据初始化之后")
},
beforeMount(){
console.log("挂载渲染之前")
},
mounted(){
console.log("挂载渲染之后")
},
beforeUpdate(){
console.log("更新之前")
},
updated(){
console.log("更新之后")
},
beforeUnmount(){
console.log("销毁之前")
},
unmount(){
console.log("销毁之后")
}
}
</script>
三、合成API
setup() 使用composition-Api的入口;
可接受两个参数:setup(props, context)
props:接受父组件传来的参数;
context:(执行上下文)
使用ref声明函数,才是可变的
使用函数必须从setup里return出去
1:详解
<template>
<div class="content">
<user :username="username" :age="age"/>
</div>
</template>
<script>
//声明式
import user from './components/user.vue'
import {ref,reactive,toRefs,computed,watch,watchEffect} from 'vue'
//导入ref reacive toRef函数
export default {
name: 'App',
components:{
user
},
setup(){
//数值
//使一个值或者字符串变成响应式
const num = ref(0);
//对象
//使一个对象变成响应式
const user = reactive({
username : "可可",
age:18,
type:"爱动",
reverseType:computed(()=>{
return user.type.split('').reverse().join('')
})
})
//方法
function changeNum(){
num.value += 10;
}
function changeType(){
user.type = "超级爱动"
}
watchEffect(()=>{
//会判断里面的内容要监听的函数
console.log(user.type)
console.log("user.type改变")
})
watch([num,user],(newnum,prevNum)=>{
console.log(newnum,prevNum);
console.log("当num改变的时候,会触发执行函数")
})
//将变量方法返回
return {num,changeNum,user,...toRefs(user),changeType}
}
</script>
2.user.vue
<template>
<div>
<!-- 从父组件传递给子组件参数 -->
<h1>username:{{username}}</h1>
<h1>age:{{age}}</h1>
<h3>{{description}}</h3>
</div>
</template>
<script>
import {ref,reactive,toRefs,computed,watch,watchEffect} from 'vue'
export default {
props:['age','username'],
//content可以获取从父元素传递过来的数据比如class属性值
setup(props,content){
console.log(props);
//由于setup执行在前面,this指针还未加载,所以在这不能用this传值
const description = ref(props.username+"年龄是"+props.age);
return {
description
}
}
}
</script>
3.setup中使用生命周期函数
<template>
<div>
<!-- 从父组件传递给子组件参数 -->
<h1>username:{{username}}</h1>
<h1>age:{{age}}</h1>
<h3>{{description}}</h3>
</div>
</template>
<script>
import {ref,reactive,toRefs,computed,watch,watchEffect,onBeforeMount,onMounted,onBeforeUpdate,onBeforeUnmount,onUnmounted} from 'vue'
export default {
props:['age','username'],
//content可以获取从父元素传递过来的数据比如class属性值
setup(props,content){
console.log(props);
//由于setup执行在前面,this指针还未加载,所以在这不能用this传值
const description = ref(props.username+"年龄是"+props.age);
//可以多次触发,如果需要生命周期就把它们导入进来,前面多加一个on
onBeforeMount(()=>{
console.log("onBeforeMount")
})
onBeforeMount(()=>{
console.log("onBeforeMount")
})
return {
description
}
}
}
</script>
4:利用provide从父组件传值给子组件
<template>
<div class="content">
<student/>
</div>
</template>
<script>
//声明式
import student from './components/student.vue'
import {ref,reactive,toRefs,computed,watch,watchEffect,provide} from 'vue'
//导入ref reacive toRef函数
export default {
name: 'App',
components:{
student
},
setup(){
const student = reactive({
name:"小小",
classname:"5年4班"
})
provide('student',student);
return {}
}
}
</script>
student.vue
<template>
<div>
<h1>学生:{{name}}</h1>
<h1>年龄:{{classname}}</h1>
</div>
</template>
<script>
import {ref,reactive,toRefs,computed,watch,watchEffect,provide,inject} from 'vue'
//获取提供的内容,需要注入函数inject
export default {
setup(props,content){
const student = inject('student')
return{
student
}
}
}
</script>
四 : 路由
1.路由的基本概念
三个基本的概念route,routes,router.
// route 它是一条路由,就是一个路径和组件的映射关
{
path:'/',
component: Home
}
//routes 是一组路由,把每条route的路由组合起来,形成一个数组。
routes:[
{
path:'/',
component: Home
},
{
path:'/list',
component: List
}
]
//router 是一个路由机制,router会根据路径处理不同组件
var router = new VueRouter({
// 配置路由
routes:[...]
})
2:安装路由
npm install vue-router@next
3:组件说明
router-link组件
router-link是vue-router已经注册好的组件,直接使用就可以了
router-link是用来切换路由的,通过to属性来跳转到指定的路由
router-link在编译的时候会自动被编译为a标签,可以使用tag属性指定编译为你要的标签
router-view组件
router-view用来指定当前路由所映射的组件显示的位置
router-view可以理解为占位符,为路由映射的组件占位,不同路由映射的组件通过替换显示
和动态组件的效果类似
4:动态路由和404NotFound
不同的用户(就是用户的id不同),它都会导航到同一个user 组件中。
path:‘/students/:id’ component:students
router 下的index.js
import {createRouter,createWebHashHistory} from 'vue-router'
const routes = [
{ path: '/', component: Home },
{path:'/:path(.*)',component:Notfound
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router;
Notfound.vue
<template>
<div>
<p>404 not found page</p>
</div>
</template>
5.嵌套路由
router 下的index.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
{
path: "/user",
component: User,
children:[{path:'hengban',component:hengban},
{path:'shuban',component:shuban}]
}];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
利用req.params.id来获取路由的不同部分的数据
router 下的index.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
{ path: "/user/:id",
component: User}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
user.vue
<template>
<div>
<h1>User页面</h1>
<h2>{{$route.params.id}}</h2>
<router-view></router-view>
</div>
</template>
6.使用js跳转页面
$router.push()
<template>
<div>
<button @click="toindexpage">跳转到首页</button>
</div>
</template>
<script>
export default {
methods:{
toindexpage(){
console.log("跳转到about页面")
this.$router.push({path:'/about'})
//this.$router.push({path:'/mypage/123'})
//携带参数
//this.$router.push({name:"mypage",params:{id:132}})
}
}
}
</script>
router 下的index.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
{path:'/page/:id',
name:'mypage',//别名
component:page}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
携带参数跳转
<script>
export default {
methods:{
toindexpage(){
console. log( "跳转到about页面")
this. $router. push({path:'/',
query:{search: '小小',id: '10'}
})
}
}
}
</script>
$router.replace()
this.$router.replace({path:‘/page’})
$router.go(-1)返回上一个页面
$router.go(-1)
$router.go(1)前进到下一个页面
$router.go(1)
<template>
<div>
<button @click="toindexpage">跳转到首页</button>
<button @click="replacePage">替换页面</button>
<button @click="$router.go(1)">前进</button>
<button @click="$router.go(-1)">后退</button>
</div>
</template>
<script>
export default {
methods:{
toindexpage(){
console.log("跳转到about页面")
this.$router.push({path:'/mypage'})
},
replacePage(){
console.log("替换页面")
this.$router.replace({path:'/page'})
}
}
}
</script>
7.命名视图:置多个组件进行渲染
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
{path:'/shop',
components:{
default:shop,//默认值页面是shop
shopfoot:shopfoot,
shopTop:shopTop
}
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
<template>
<div class="content">
<router-view></router-view>
<router-view name="shopTop"></router-view>
<router-view name="shopfoot"></router-view>
<!-- 如果遇见名字相同的,会把内容更新到路由上 -->
</div>
</template>
<script>
export default {
name: "App",
components: {},
setup() {
return {};
}
};
</script>
8.重定向和别名
{
path:'/mall',
redirect:(to)=>{return{path:'/shop'}}
}
//别名
alias:"/cocoshop",
9.导航守卫
router.beforeEach((to,from)=>{
return false;//返回为false没有权限,页面无显示
})
router.beforeEach((to,from,next)=>{
console.log(to)
next();//如果想要继续访问使用next()调用起来
})
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
{path:'/shop',
alias:"/cocoshop",
components:{
default:shop,//默认值页面是shop
shopfoot:shopfoot,
shopTop:shopTop
},
//具体的进入某一个组件页面
beforeEnter:(to,from)=>{
console.log("beforeEnter")
//只会进入page页面才会产生经常会用到
}
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
10.选项API
beforeRouteEnter(){
console.log("路由进入")
},
beforeRouteUpdate(){
console.log("路由更新组件")
},
beforeRouteLeave(){
console.log("路由离开组件")
}
<template>
<div>
<h1>购物商城</h1>
<button @click="topage"></button>
</div>
</template>
<script>
export default {
methods:{
topage:function(){
this.$router.push({path:'/mypage'})
}
},
beforeRouteEnter(){
console.log("路由进入")
},
beforeRouteUpdate(){
console.log("路由更新组件")
},
beforeRouteLeave(){
console.log("路由离开组件")
}
}
</script>
11.路由模式
一种是通过hash值,一种是通过H5 的history.Vue路由默认使用hash模式.
hash值
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes
});

history
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

本文详细介绍了Vue3中的路由组件,包括声明式创建组件、生命周期函数、合成API的setup()函数及其用法,以及路由的基本概念如route、routes、router。还涵盖了安装vue-router、动态路由、嵌套路由、导航守卫、命名视图、重定向和别名等关键知识点。同时讨论了路由模式,如hash和history模式。
1046

被折叠的 条评论
为什么被折叠?



