在 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的主要概念包括：
在Vue Router中，你可以使用以下步骤来创建和管理路由：
router.addRoutes()方法来动态添加路由。你也可以在项目的配置文件中定义静态路由。<router-view>组件来渲染与该路由关联的组件。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>