笔记：vue3路由

最新推荐文章于 2024-10-12 16:17:00 发布

安然907

最新推荐文章于 2024-10-12 16:17:00 发布

阅读量481

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_55776682/article/details/126863646

版权

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

摘要由CSDN通过智能技术生成

一：路由组件

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'
/