vue混入、路由、动态路由匹配
2023-12-14 17:52:17
混入
在 Vue.js 中，"混入"（mixins）是一种代码重用的方式，它允许你在多个组件之间共享 Vue 组件的选项。混入对象可以包含任何组件选项。当组件使用混入对象时，所有混入对象的选项都会被“混合”进入该组件的选项。
以下是一个简单的示例，展示了如何在 Vue 中使用混入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{mixinData}}
{{msg}}
{{foo()}}
{{bar()}}
<my-a></my-a>
<p v-text="msg"></p>
</div>
<script>
// 混入对象提供data选项，会发生合并，如果data中数据有冲突，保留组件数据
// 混入时生命周期和钩子函数也会合并，同名的钩子函数也会合并为一个数组并依次调入，混入对象钩子函数先执行
// 混入的是值为对象选项，methods、computed会合并为一个对象，如果属性冲突，会保留组件内的键值对
// 混入对象配置项 混入作用：分发Vue的复用功能
let myMixin = {
data(){
return{
mixinData:'我是混入数据对象的数据'
}
},
created(){
console.log('我是混入对象的生命周期');
},
beforeMount() {
console.log('beforeMount');
},
methods:{
foo(){
console.log('我是混入的foo方法');
},
bar(){
console.log('我是混入的bar方法');
}
}
}
//全局混入 会把混入对象混入到每一个组件中 影响每一个组件 谨慎使用
// Vue.mixin(myMixin)
let myA ={
template:`
<div>mya组件----------{{mixinData}}--{{foo()}}</div>`
}
new Vue({
el:'#app',
// 局部混入 只会合并到当前的实例组件中
mixins:[myMixin],
data:{
msg:'hello world'
},
components:{
"my-a":myA
},
methods: {
bar(){
return this.msg
}
},
created(){
console.log(this.$data,'获取的数据');
}
})
</script>
</body>
</html>路由
在Vue.js中，路由是用于在应用程序中导航到不同页面或视图的关键功能。Vue Router是Vue.js的官方路由库，它提供了一套灵活而强大的路由解决方案。
Vue Router的主要概念包括：
- 路由：路由是应用程序中不同页面或视图的映射。每个路由都与一个URL路径相关联，并在用户导航到该路径时渲染相应的组件。
- 路由器：路由器是管理路由的对象，它负责将URL路径映射到相应的组件，并在组件之间进行导航。
- 路由组件：路由组件是用户界面中的单个视图或页面。它们通过路由器进行注册，并在用户导航到相应的路由时被渲染。
在Vue Router中，你可以使用以下步骤来创建和管理路由：
- 安装Vue Router：首先，你需要在你的Vue.js项目中安装Vue Router。你可以使用npm或yarn来安装它。
- 创建路由：在你的Vue应用程序中，你可以使用
router.addRoutes()方法来动态添加路由。你也可以在项目的配置文件中定义静态路由。 - 渲染组件：当用户导航到相应的路由时，你需要使用
<router-view>组件来渲染与该路由关联的组件。 - 导航守卫：Vue Router提供了导航守卫功能，它允许你在导航发生之前或之后执行一些逻辑，例如检查用户权限或进行数据预加载。
- 重定向和编程式导航：除了通过URL路径进行导航外，你还可以使用
router.push()和router.replace()方法进行编程式导航，以及使用router.redirect()方法进行重定向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.6.5/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 通过路由方式加载组件 -->
<router-link to="/mya">去A组件</router-link>
<router-link to="/myb">去B组件</router-link>
<!-- 通过router-view匹配路由出口 -->
<router-view></router-view>
</div>
<script>
// 创建组件
let mya = {
template:`
<div>mya组件</div>`
}
let myb = {
template:`
<div>myb组件</div>`
}
//声明路由对象数组 对象存放一个组件路由信息
const routes =[
{
path:'/',
//重定向
redirect:{name:'myA'}
},
{
// 路由路径
path:'/mya',
// 路由映射组件
component:mya,
// 给路由设置名称
name:'myA'
},
{
path:'/myb',
component:myb
},
]
// 创建路由器对象 将路由对象数组挂载到路由对象中
const router = new VueRouter({
routes,
// 路由模式
mode:'hash'
})
new Vue({
el:'#app',
// 将路由器对象注册到Vue根实例
router,
data:{
msg:'hello world'
},
components:{
},
methods: {
},
created(){
}
})
</script>
</body>
</html>动态路由匹配
Vue动态路由匹配是一种将路由路径与组件映射的方法，以便根据不同的URL路径参数渲染不同的组件。
在Vue中，你可以使用动态路由匹配来实现动态组件的渲染。动态路由匹配的语法是在路由路径中使用冒号（:）来指定参数占位符。当用户访问带有参数的URL时，Vue会将参数值传递给相应的组件。
以下是一个示例，演示了如何使用动态路由匹配：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.6.5/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 通过路由方式加载组件 -->
<router-link to="/mya">去A组件</router-link>
<router-link to="/myUser/1/terry">去user组件</router-link>
<!-- 通过router-view匹配路由出口 -->
<router-view></router-view>
</div>
<script>
// 创建用户组件
let myUser = {
template:`
<div>用户组件----{{id}}----{{username}}</div>`,
data(){
return{
id:'',
username:''
}
},
// 响应路由参数变化
// 通过watch监听路由对象
// watch:{
// $route(to,from){
// console.log(to,from,'to是即将去','from是离开');
// this.id=to.params.id
// this.username=to.params.username
// }
// },
// 组件内导航守卫 组件更新触发
beforeRouteUpdate(to,from,next){
this.id = to.params.id
this.username = to.params.username
},
created(){
console.log(this.$route);
}
}
let mya = {
template:`
<div>mya组件</div>`
}
//声明路由对象数组 对象存放一个组件路由信息
const routes =[
{
path:'/',
//重定向
// redirect:{name:'myA'}
},
{
// 路由路径
path:'/mya',
// 路由映射组件
component:mya,
// 给路由设置名称
name:'myA'
},
{
path:'/myUser/:id/:username',
component:myUser
},
]
// 创建路由器对象 将路由对象数组挂载到路由对象中
const router = new VueRouter({
routes,
// 路由模式
mode:'hash'
})
new Vue({
el:'#app',
// 将路由器对象注册到Vue根实例
router,
data:{
msg:'hello world'
},
components:{
},
methods: {
},
created(){
}
})
</script>
</body>
</html>
文章来源:https://blog.csdn.net/weixin_55269913/article/details/134998682
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！