专栏首页黑马【Vue_04】路由

【Vue_04】路由

一、路由介绍

1. 什么是路由

路由的实质是一种对应关系,url 与资源之间的对应关系就是路由。 路由分为前端路由和后端路由,后端路由是由服务器完成转发,前端路由是hash(锚点)的变化实现的。

2. 原生实现路由
<div id="app">
    <!-- tab栏 -->
    <a href="#/tab1">tab1</a>
    <a href="#/tab2">tab1</a>
    <a href="#/tab3">tab1</a>

    <!-- 组件占位符 -->
    <component :is="name"></component>
</div>
        
<script>
    // 组件
    var tab1 = {
        template : "<h1>tab1 内容</h1>"
    }
    var tab2 = {
        template : "<h1>tab2 内容</h1>"
    }
    var tab3 = {
        template : "<h1>tab3 内容</h1>"
    }

    // Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            name: "tab1"
        },
        components: {
            tab1,
            tab2,
            tab3
        }
    });

    // 监听锚点变化
    onhashchange = function() {
        app.name = location.hash.slice(2);
    }
</script>

二、Vue Router

1. Vue Router使用步骤

1.引入 vue.js、vue-router.js 文件。 2.使用 router-link 标签添加路由链接,默认会被渲染为 a 标签,to 属性默认被渲染为 href 属性,to 属性的值会被渲染为 # 开头的 hash 地址。 3.使用 router-view 标签添加路由填充位(路由占位符) 4.定义路由组件 5.创建路由实例并配置路由规则 6.将路由挂载到 Vue 实例中

2. Vue Router Demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>   
    <script src="vue.js" ></script>
    <script src="vue-router_3.0.2.js"></script>
</head>
    <body>
        <div id="app">
                <!-- 路由链接 -->
                <router-link to="/tab1">标签1</router-link>
                <router-link to="/tab2">标签2</router-link>
                <router-link to="/tab3">标签3</router-link>
            
                <!-- 路由占位符 -->
                <router-view></router-view>
            </div>
                    
            <script>
                // 路由组件
                var tab1 = {
                    template : "<h1>王大锤</h1>"
                }
                var tab2 = {
                    template : "<h1>熏悟空</h1>"
                }
                var tab3 = {
                    template : "<h1>小仙女</h1>"
                }
            
                // 创建路由实例
                var myRouter = new VueRouter({
                    routes: [
                        /*
                            每一个路由规则都是一个对象,对象中至少包含 path、component 两个属性
                            path:表示路由要匹配的 hash 地址, 当 path 设置为 "/" 时,表示初始地址
                            component:表示路由规则要匹配的路由组件
                            redirect:表示重定向到某锚点
                        */
                        {path: "/", redirect: "/tab1"},
                        {path: "/tab1", component: tab1},
                        {path: "/tab2", component: tab2},
                        {path: "/tab3", component: tab3}
                    ]
                });
            
                // Vue实例
                var app = new Vue({
                    el: "#app",
                    // 将路由挂在到 Vue 实例
                    router: myRouter
                });
            
            </script>
    </body>
</html>
3. 嵌套路由
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>   
    <script src="vue.js" ></script>
    <script src="vue-router_3.0.2.js"></script>
</head>
    <body>
        <div id="app">
            <!-- 路由链接 -->
            <router-link to="/tab1">标签1</router-link>
            <router-link to="/tab2">标签2</router-link>
            <router-link to="/tab3">标签3</router-link>

            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
                
        <script>
            // 路由组件
            var tab1 = {
                template : "<h1>王大锤</h1>"
            }
            var tab2 = {
                template : `
                    <div>
                        子路由1 <br />
                        <router-link to="/son11">son11</router-link>
                        <router-link to="/son12">son12</router-link>

                        <router-view></router-view>
                    </div>
                `
            }
            var tab3 = {
                template :  `
                    <div>
                        子路由2 <br />
                        <router-link to="/son21">son21</router-link>
                        <router-link to="/son22">son22</router-link>

                        <router-view></router-view>
                    </div>
                `
            }

            // 定义子级路由组件
            var son11 = {
                template: "<h1>No.1 China</h1>"
            }
            var son12 = {
                template: "<h1>No.1 中国</h1>"
            }
            var son21 = {
                template: "<h1>No.2 SZ</h1>"
            }
            var son22 = {
                template: "<h1>No.2 深圳</h1>"
            }

            // 创建路由实例
            var myRouter = new VueRouter({
                routes: [
                	// 路由规则
                    {path: "/", redirect: "/tab1"},
                    {path: "/tab1", component: tab1},
                    {
                        path: "/tab2", 
                        component: tab2,
                        // 通过 children 来添加子级路由规则
                        children: [
                            {path: "/", redirect: "/son11"},
                            {path: "/son11", component: son11},
                            {path: "/son12", component: son12}
                        ]
                    },
                    {
                        path: "/tab3", 
                        component: tab3,
                        children: [
                            {path: "/", redirect: "/son21"},
                            {path: "/son21", component: son21},
                            {path: "/son22", component: son22}
                        ]
                    }
                ]
            });

            // Vue实例
            var app = new Vue({
                el: "#app",
                // 将路由挂在到 Vue 实例
                router: myRouter
            });

        </script>
    </body>
</html>
4. 动态路由
// 传递普通值
<div id="app">
      <!-- 路由链接 -->
      <router-link to="/tab/1">标签1</router-link>
      <router-link to="/tab/2">标签2</router-link>
      <router-link to="/tab/3">标签3</router-link>
  
      <!-- 路由占位符 -->
      <router-view></router-view>
</div>
        
<script>
    // 路由组件
    var tab = {
        props: ["id"],
        template : "<h1>{{id}}号王大锤</h1>"
    }

    // 创建路由实例
    var myRouter = new VueRouter({
        routes: [
        	  // props 设置为 true 时,才能开启传递,否则只能在组件中使用 $route.params.xx 获取值
            {path: "/tab/:id", component: tab, props: true}
        ]
    });

    // Vue实例
    var app = new Vue({
        el: "#app",
        // 将路由挂在到 Vue 实例
        router: myRouter
    });
</script>

// 传递对象
<div id="app">
    <!-- 路由链接 -->
    <router-link to="/tab/1">标签1</router-link>
    <router-link to="/tab/2">标签2</router-link>
    <router-link to="/tab/3">标签3</router-link>

    <!-- 路由占位符 -->
    <router-view></router-view>
</div>
        
<script>
    // 路由组件
    var tab = {
        props: ["name", "age", "id"],
        template : "<h1>{{id}}号{{name}}有{{age}}岁</h1>"
    }

    // 创建路由实例
    var myRouter = new VueRouter({
        routes: [
        	// 若不需要传递 id 值,则只需要设置 props: {} 即可
            {path: "/tab/:id", component: tab, props: (route) => {
                return {name: "王大锤", age: 250, id: route.params.id};
            }}
        ]
    });

    // Vue实例
    var app = new Vue({
        el: "#app",
        // 将路由挂在到 Vue 实例
        router: myRouter
    });
</script>
5. 命名路由
<div id="app">
    <!-- 路由链接 -->
    <router-link to="/tab1">标签1</router-link>
    <!-- 可以直接使用别名进行跳转 -->
    <router-link :to="{name: 'routeName'}">标签2</router-link>

    <!-- 路由占位符 -->
    <router-view></router-view>
</div>
        
<script>
    // 路由组件
    var tab1 = {
        template : "<h1>11111111</h1>"
    }
    var tab3 = {
        template : "<h1>33333333</h1>"
    }

    // 创建路由实例
    var myRouter = new VueRouter({
        routes: [
            {path: "/tab1", component: tab1},
            // name 属性可以给路由起别名
            {path: "/tab3", component: tab3, name:"routeName"}
        ]
    });

    // Vue实例
    var app = new Vue({
        el: "#app",
        // 将路由挂在到 Vue 实例
        router: myRouter
    });
</script>
6. 编程式导航
  • 声明式与编程式的区别

使用 router-link 会在底层调用 router.push( )

声明式

编程式

router-link to=" "

router.push( )

示例

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue路由详解(路由基础,路由轮播,路由传参,通配符路由)

    一. Vue路由基础知识点: 1.router-view: 类似angular里的插座,用于承载路由的切换组件 2.router-link: 类似angula...

    生南星
  • 【路由】:路由那些事——中

    示例:(特别注意,下面是基于"path-to-regexp": "^6.2.0" 搞的测试)

    WEBJ2EE
  • 【路由】:路由那些事——上

    前端三杰 Angular、React、Vue 都推荐单页面应用 SPA 开发模式,它们都有自己的前端路由解决方案:

    WEBJ2EE
  • Flutter中的基本路由、命名路由、替换路由,返回到根路由

    Flutter中的路由,通俗地讲就是页面跳转。在Flutter中通过 Navigator 组件管理路由导航。

    拉维
  • 路由

        路由提供了Route类作为IRouter的标准实现。当调用RouteAsync方法时,Route使用路由模板语法定义匹配URL路径的模式,当调用GetV...

    莫问今朝
  • 锐捷路由技术 | 路由协议之静态路由

    Ruijie(config)#interfacefastethernet 0/1

    网络技术联盟站
  • beego路由配置路由设置

    web框架中,路由是重要的一环,对于beego的路由配置如何? 让我们从入口文件先分析起来吧:

    若与
  • 路由交换OSPF域内路由

    OSPF路由器R1的LSDB同步完毕后,需要独立计算去往每个网段的最优路径 R1的Router ID 1.1.1.1 每台OSPF路由器都会为每个区域生成唯一一...

    用户3376261
  • 路由交换之静态路由

    Weiyang
  • 简易路由实现——(hash路由)

    前阵子逛 github 的时候,看见一篇文章 《原生JS实现hash路由》, 想着照着 vue-router 的 api,参考这篇文章实现一个可直接用于 htm...

    小皮咖
  • 简易路由实现——(history路由)

    上篇文章讲述了 简易路由实现——(hash路由)的简单实现,本文续讲 history 路由的实现

    小皮咖
  • 前端路由0.前言1.哈希路由2.history路由

    后端有后端路由,根据路由返回特定的网页,代表者是传统的mvc模式,模板引擎+node。前端也有前端的路由,我们用三大框架做spa的时候,总是和路由离不开关系。主...

    lhyt
  • dubbo路由代码分析4(script路由器file路由器)

    接上篇 https://cloud.tencent.com/developer/article/1109564 这篇分析下,script类型和file类型路由器...

    技术蓝海
  • 一个类似backbone路由的纯净route ( 前端路由 客户端路由 backbone路由 )

    用户1258909
  • Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    最开始的路由,我们是直接写在app.module.ts文件中的,像这样,我们可以实现简单的导航。

    贺贺V5
  • ASP.NET MVC路由扩展:路由映射

    上周我写了三篇文章(一、二、三)详细地介绍了ASP.NET的路由系统。ASP.NET的路由系统旨在通过注册URL模板与物理文件之间的映射进而实现请求地址与文件路...

    蒋金楠
  • ASP.NET的路由系统:路由映射

    总的来说,我们可以通过RouteTable的静态属性Routes得到一个基于应用的全局路由表,通过上面的介绍我们知道这是一个类型的RouteCollection...

    蒋金楠
  • 告别 hash 路由,迎接 history 路由

    在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~

    Krry
  • Blazor 中的路由和路由模板

    过去的 ASP.NET Web 窗体和现代 Web 明显区别在于 Web 服务器入口是否存在路由组件。在 Web 窗体中,绝大多数 Web 终结点都是物理文件资...

    Edison.Ma

扫码关注云+社区

领取腾讯云代金券