【Vue_04】路由

原创
02/17 21:13
阅读数 459

一、路由介绍

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( )
  • 示例
    <div id="app">
    	<router-link to="/tab1">标签1</router-link>
        <a href="" @click.prevent="go">标签3</a>
    
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
            
    <script>
        // 路由组件
        var tab1 = {
            template : "<h1>11111111</h1>"
        }
        var tab3 = {
            template : "<h1>33333333</h1>"
        }
    
        // 创建路由实例
        var myRouter = new VueRouter({
            routes: [
                {path: "/", redirect: "/tab1"},
                {path: "/tab1", component: tab1}
                {path: "/tab3", component: tab3, name: "routeName"}
            ]
        });
    
        // Vue实例
        var app = new Vue({
            el: "#app",
            methods: {
                go() {
                	// 传递字符串
                    this.$router.push("tab3");
                    // 传递对象
                    this.$router.push({path: "tab3"});
                    // 传递命名路由
                    this.$router.push({name: "routeName"});
                    // 在 history 中前进(+)或后退(-)
                    this.$router.go(n)
                }
            },
            router: myRouter
        });
    
    </script>
    
展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部