vue混入、路由、动态路由匹配

桃汁11

于 2023-12-14 17:04:03 发布

阅读量653

点赞数 29

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55269913/article/details/134998682

版权

混入

在 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>

桃汁11

关注

29
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue混入、路由、动态路由匹配

在 Vue.js 中，"混入"（mixins）是一种代码重用的方式，它允许你在多个组件之间共享 Vue 组件的选项。混入对象可以包含任何组件选项。当组件使用混入对象时，所有混入对象的选项都会被“混合”进入该组件的选项。
复制链接

扫一扫