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

发布时间:2023年12月18日

混入

在 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的主要概念包括:

  1. 路由:路由是应用程序中不同页面或视图的映射。每个路由都与一个URL路径相关联,并在用户导航到该路径时渲染相应的组件。
  2. 路由器:路由器是管理路由的对象,它负责将URL路径映射到相应的组件,并在组件之间进行导航。
  3. 路由组件:路由组件是用户界面中的单个视图或页面。它们通过路由器进行注册,并在用户导航到相应的路由时被渲染。

在Vue Router中,你可以使用以下步骤来创建和管理路由:

  1. 安装Vue Router:首先,你需要在你的Vue.js项目中安装Vue Router。你可以使用npm或yarn来安装它。
  2. 创建路由:在你的Vue应用程序中,你可以使用router.addRoutes()方法来动态添加路由。你也可以在项目的配置文件中定义静态路由。
  3. 渲染组件:当用户导航到相应的路由时,你需要使用<router-view>组件来渲染与该路由关联的组件。
  4. 导航守卫:Vue Router提供了导航守卫功能,它允许你在导航发生之前或之后执行一些逻辑,例如检查用户权限或进行数据预加载。
  5. 重定向和编程式导航:除了通过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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。