Vue路由 router-命名视图 leve4

最新推荐文章于 2024-09-21 11:29:05 发布

Abinhere

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量110

点赞数

分类专栏：浅谈vue-router路由文章标签： vue vue.js html javascript html5

本文链接：https://blog.csdn.net/weixin_42390302/article/details/108875348

版权

浅谈vue-router路由专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue路由 router-命名视图 leve4

我们路由中的每一个router-view都是一个视图，我们的router-link会找离他最近的router-view,也可以理解为一个组件中的router-link会去找当前组件中的router-view。我们一个组件中如果有多个视图那么这个时候我们就需要用到命名视图了。

代码如下：

<!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="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
            font-weight: 600;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <router-link tag="li" to="/home" exact active-class="active">首页</router-link>
            <router-link tag="li" to="/search" exact active-class="active">搜索</router-link>
        </ul>
        <router-view name="header"></router-view>
        <router-view></router-view>
        <router-view name="footer"></router-view>
    </div>
    <script>
        const position = {
            template:`
                <div>position</div>
            `
        }
        const search = {
            template:`
                <div>search</div>
            `
        }
        /* 这里配置我们的路由 */
        let router = new VueRouter({
            routes:[
                {//配置默认路径
                    path:"/",
                    redirect:"/home"
                },
                {
                    path:'/home',
                    // 多视图
                    components:{
                        default:{template:'<div>main content</div>'},//默认视图 也就是说我们没有给router-view起名字时 它就叫default
                        header:{template:'<div>header content</div>'},
                        footer:{template:'<div>footer content</div>'}
                    },
                },
                {
                    path:'/search',
                    component:search,
                },
            ]
        })

        let vm = new Vue({
            router,
            el:'#app'
        })
    </script>
</body>
</html>