笔记:vue3路由

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:路由组件

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
})

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安然907

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值