Vue路由

最新推荐文章于 2024-07-15 17:15:41 发布

Z_BK9

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量177

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Z_BK9/article/details/126473168

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、路由简介

1、概念：路由就是SPA（单页应用）的路径管理器

2、路由分类：

Hash模式：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
History模式：由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router = new VueRouter({routes, mode:'hash|history|abstract',})

3、路由作用

根据url锚点路径，在容器中加载不同的模块（组件），本质作用是做网页导航
完成SPA（单页面应用）的开发。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的 HTML、JavaScript、CSS。
一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互

4、路由功能的引入

Vue本身并没有提供路有机制，但是官方以插件（vuerouter）的形式提供了对路由的支持

路由官网：Vue Router
直接下载 : https://unpkg.com/vue-router@3.0.1/dist/vue-router.js使用 vue-router.js 库来引入路由功能模块
通过脚手架引入

二、一级路由

1、核心组件

router-link：这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

2、创建过程

准备三模板元素，作为每个路由加载的内容
创建路由对象，并绑定模板元素
创建路由链接router-link
创建路由router-view

3、创建模板元素

引入vue-router.js

<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

准备三个模板元素，构造三个组件，用来路由加载的内容

 <!-- 1、定义路由组件 -->
    <template id="home">
        <div>
            <h1>主页</h1>
        </div>
    </template>
    <template id="news">
        <div>
            <h1>新闻</h1>
        </div>
    </template>
    <template id="blog">
        <div>
            <h1>博客</h1>
        </div>
    </template>

4、创建路由对象，并挂到Vue实例

注意第四行是配置的是routes,不要快捷方式提示错了

 <script>
        // 2. 创建 router 实例，并配置 `routes` 
        const router = new VueRouter({
            routes:  [{
                path: "/home",
                component: {
                    template: "#home"
                }
            }, {
                path: "/news",
                component: {
                    template: "#news"
                }
            }, {
                path: "/blog",
                component: {
                    template: "#blog"
                }
            }]

        })
        // 3 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        var vm = new Vue({
            el: "#app",
            data: {},
            router: router
        })
    </script>

5、使用 router-link 组件来导航

  <div id="app">
        <!-- 3、使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/blog">博客</router-link>
    </div>

6、配置路由出口

<!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

7、完整示例

<body>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <div id="app">
        <!-- 3、使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <ul>
            <li>
                <router-link to="/home">主页</router-link>
            </li>
            <li>
                <router-link to="/news">新闻</router-link>
            </li>
            <li>
                <router-link to="/blog">博客</router-link>
            </li>
        </ul>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <!-- 1、定义路由组件 -->
    <template id="home">
        <div>
            <h1>主页</h1>
        </div>
    </template>
    <template id="news">
        <div>
            <h1>新闻</h1>
        </div>
    </template>
    <template id="blog">
        <div>
            <h1>博客</h1>
        </div>
    </template>
    <script>
        // 2. 创建 router 实例，并配置 `routes` 
        const router = new VueRouter({
            routes: [{
                path: "/home",
                component: {
                    template: "#home"
                }
            }, {
                path: "/news",
                component: {
                    template: "#news"
                }
            }, {
                path: "/blog",
                component: {
                    template: "#blog"
                }
            }]

        })
        // 3 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        var vm = new Vue({
            el: "#app",
            data: {},
            router: router,
            mounted() {
                this.$router.push("/home")
            },
        })
    </script>
</body>
<style>
    #app {
        height: 30px;
        width: 100%;
        background-color: #c00;
    }

    #app ul {
        margin: 0 0 0 30px;
        padding: 0px;
        font-size: 12px;
        color: #fff;
        line-height: 30px;
        white-space: nowrap;
    }

    #app li {
        list-style-type: none;
        display: inline;
    }

    #app li a {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        padding: 7px 10px;
        color: #fff;
    }

    #app li a:hover {
        color: #ff0;
        background-color: #f00;
    }
</style>

</html>

三、二级路由

一级路由的某个组件中又包含了一个导航，则可以使用二级路由实现

1、创建模板元素

在上面例子的基础上添加两个模板

 <!-- 1、定义路由组件 -->   
    <template id="inNews">
        <div>
            <h1>国内新闻</h1>
        </div>
    </template>
    <template id="outNews">
        <div>
            <h1>国际新闻</h1>
        </div>
    </template>

2、创建路由对象，并挂到Vue实例

修改news，添加children

 // 2. 创建 router 实例，并配置 `routes` 
        const router = new VueRouter({
            routes: [{
                path: "/home",
                component: {
                    template: "#home"
                }
            }, {
                path: "/news",
                component: {
                    template: "#news"
                },
                children: [{
                        path: "/inNews",
                        component: {
                            template: "#inNews"
                        }
                    },
                    {
                        path: "/outNews",
                        component: {
                            template: "#outNews"
                        }
                    }
                ]
            }, {
                path: "/blog",
                component: {
                    template: "#blog"
                }
            }]

        })

3、修改news模板，使用 router-link 组件来导航

也需要添加router-view

<template id="news">
        <div>
           
            <ul>
                <li>
                    <router-link to="/inNews">国内新闻</router-link>
                </li>
                <li>
                    <router-link to="/outNews">国际新闻</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </template>

4、完整示例

<body>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <div id="app">
        <!-- 3、使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <ul>
            <li>
                <router-link to="/home">主页</router-link>
            </li>
            <li>
                <router-link to="/news">新闻</router-link>
            </li>
            <li>
                <router-link to="/blog">博客</router-link>
            </li>
        </ul>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <!-- 1、定义路由组件 -->
    <template id="home">
        <div>
            <h1>主页</h1>
        </div>
    </template>
    <template id="news">
        <div>
           
            <ul>
                <li>
                    <router-link to="/inNews">国内新闻</router-link>
                </li>
                <li>
                    <router-link to="/outNews">国际新闻</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <template id="blog">
        <div>
            <h1>博客</h1>
        </div>
    </template>
    <template id="inNews">
        <div>
            <h1>国内新闻</h1>
        </div>
    </template>
    <template id="outNews">
        <div>
            <h1>国际新闻</h1>
        </div>
    </template>
    <script>
        // 2. 创建 router 实例，并配置 `routes` 
        const router = new VueRouter({
            routes: [{
                path: "/home",
                component: {
                    template: "#home"
                }
            }, {
                path: "/news",
                component: {
                    template: "#news"
                },
                //注意children和component是同级，不能放到component里面去
                children: [{
                        path: "/inNews",
                        component: {
                            template: "#inNews"
                        }
                    },
                    {
                        path: "/outNews",
                        component: {
                            template: "#outNews"
                        }
                    }
                ]
            }, {
                path: "/blog",
                component: {
                    template: "#blog"
                }
            }]

        })
        // 3 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        var vm = new Vue({
            el: "#app",
            data: {},
            router: router,
            mounted() {
                this.$router.push("/home")
            },
        })
    </script>
</body>


</html>

5、命名路由及传递参数完整示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <div id="app">
        <router-link to="/home/1">主页</router-link>
        <router-link :to="{name:'h',params:{name: '1001'}}">主页2</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/blog">博客</router-link>
        <router-view></router-view>
    </div>
    <template id="home">
        <div>
            <h1>主页</h1>
        </div>
    </template>
    <template id="news">
        <div>
            <router-link to="/inNews">国内新闻</router-link>
            <router-link to="/outNews">国际新闻</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="blog">
        <div>
            <h1>博客</h1>
        </div>
    </template>
    <template id="inNews">
        <div>
            <h1>国内新闻</h1>
        </div>
    </template>
    <template id="outNews">
        <div>
            <h1>国际新闻</h1>
        </div>
    </template>
    <script>
        const router = new VueRouter({
            routes:[
                {
                    path:"/home/:name",
                    name:"h",
                    component:{
                        template:"#home",
                        mounted() {
                            alert(this.$route.params.name)
                        },
                        
                    },
                },
                {
                    path:"/news",
                    component:{
                        template:"#news"
                    },
                    children:[
                        {
                            path:"/inNews",
                            component:{
                                template:"#inNews"
                            }
                        },
                        {
                            path:"/outNews",
                            component:{
                                template:"#outNews"
                            }
                        }
                    ]

                },
                {
                    path:"/blog",
                    component:{
                        template:"#blog"
                    }
                }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            router:router
        })
    </script>
</body>

</html>

Z_BK9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由

hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。创建路由对象，并绑定模板元素。
复制链接

扫一扫