vue 路由

最新推荐文章于 2024-09-11 17:04:07 发布

℡清欢

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44695219/article/details/92851885

博客介绍了路由的基本使用和嵌套相关内容，聚焦于信息技术领域中路由方面的关键知识。

路由的基本使用

<body>

<div id="app">

    <!--<a href="#/login">登录</a>-->
    <!--5.1 使用router-link导航
        to：相当于a标签的href路径
        router-link在页面中会被渲染成a标签
    -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!--5.2 使用 router-view 组件来显示匹配到的组件-->
    <router-view></router-view>
</div>


<script src="lib/vue-2.4.0.js"></script>
<!--1. 导入路由模块-->
<script src="lib/vue-router-3.0.1.js"></script>
<script>
    //2. 创建组件模板对象
    let login = {
        template: '<h1>登录组件</h1>'
    }
    let register = {
        template: '<h1>注册组件</h1>'
    }
    //3. 创建路由对象
    let router = new VueRouter({
        //路由匹配规则
        routes: [
            /*
            * 每一个规则都是一个对象，必须要有两个属性
            * 属性1： path 表示你要监听的路径
            * 属性2： component 表示要展示对应的组件----注意：写的是组件的模板对象名，而不是组件名！！！
            * */
            {path:'/',redirect:'/login'},//根路径下，又重定向/login路径所对应的组件
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        //②全局配置点击高亮显示的类
        linkActiveClass: 'myActive'
    });

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //4. 将路由对象注册到vm实例中，这样就可以监听url地址的变化
        // router:router
        router
        //5. 使用router-link导航和router-view来渲染----在dom层操作
    });


</script>
</body>
</html>

路由的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>

</div>

<template id="box">
    <div>
        <h1>登录组件</h1>

        <router-link to="/login/wangmin">王敏</router-link>
        <router-link to="/login/caicong">蔡聪</router-link>

        <router-view></router-view>
    </div>

</template>

<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<script>

    let login = {
        template: '#box'
    }
    let register = {
        template: '<h1>注册组件</h1>'
    }

    //子路由显示的组件
    let red = {
        template: '<h1>王敏喜欢红色</h1>'
    }
    let purple = {
        template: '<h1>蔡聪喜欢紫色</h1>'
    }

    let router = new VueRouter({
        routes: [
            //路由匹配规则 path, component
            // children
            {path: '/', redirect: '/login'},
            {
                path: '/login', component: login,
                children: [
                    //使用children属性配置子路由时，注意：子路由的path属性的值前面不要加"/"
                    {path: '/', redirect: 'wangmin'},
                    {path: 'wangmin', component: red},
                    {path: 'caicong', component: purple}
                ]
            },
            {path: '/register', component: register}
        ]
    });

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })


</script>
</body>
</html>