Vue初学4 vue路由

最新推荐文章于 2022-10-24 02:56:33 发布
最新推荐文章于 2022-10-24 02:56:33 发布
阅读量157 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/109274820
版权

1.vue-router的基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: "<h1>Register组件</h1>"
        };
        //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

2.路由重定向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-link to="/">重定向</router-link>
        <router-link to="/user">User</router-link>
        <router-link to="/Register">Register</router-link>

        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: '<h1>User</h1>'
        }
        const Register = {
            template: '<h1>Register</h1>'
        }
        const router = new VueRouter({
            routes: [{
                path: '/user',
                // redirect: '/Register'
                component: User
            }, {
                path: '/',
                redirect: '/Register'
                    // component: User
            }, {
                path: '/Register',
                component: Register
            }]
        })
        const vm = new Vue({
            el: '#app',
            data: {},
            router,
        })
    </script>
</body>

</html>

3.路由嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-link to='/User'>user组件</router-link>
        <router-link to='/Register'>Register组件</router-link>

        <div>
            <router-view></router-view>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: '<h1>User</h1>'
        }
        const Register = {
            template: `<div>
                <h1>Register组件</h1>
                <hr/>
                <!-- 子路由链接 -->
                <router-link to="/register/tab1">tab1</router-link>
                <router-link to="/register/tab2">tab2</router-link>
                <router-view></router-view>
                <div>`
        }
        const Tab1 = {
            template: "<h3>tab1 子组件</h3>"
        }
        const Tab2 = {
            template: "<h3>tab2 子组件</h3>"
        }
        const router = new VueRouter({
            routes: [{
                path: '/User',
                component: User
            }, {
                path: '/Register',
                component: Register,
                children: [{
                    path: '/register/tab1',
                    component: Tab1
                }, {
                    path: '/register/tab2',
                    component: Tab2
                }]
            }]
        })
        const vm = new Vue({
            el: '#app',
            data: {},
            router
        })
    </script>
</body>

</html>

4.动态路由匹配1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>
        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: "<h1>Register组件</h1>"
        };
        const UserNum = {
                template: "<h1>User {{$route.params.id}}</h1>"
            }
            //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                path: '/user/:id',
                component: UserNum,
            }, {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.动态路由匹配2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>

        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: "<h1>Register组件</h1>"
        };
        const UserNum = {
                props: ['id'],
                template: "<h1>User {{id}}</h1>"
            }
            //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                path: '/user/:id',
                component: UserNum,
                props: true
            }, {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

6.动态匹配路由3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>

        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: "<h1>Register组件</h1>"
        };
        const UserNum = {
            props: ['id', 'username', 'age'],
            template: "<h1>User 姓名为:{{username}} 年龄为:{{age}}</h1>"
        };
        //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                path: '/user/:id',
                component: UserNum,
                props: {
                    username: 'lisi',
                    age: 20
                }
            }, {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

7.动态路由匹配

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>

        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: "<h1>Register组件</h1>"
        };
        const UserNum = {
                props: ['id', 'username', 'age'],
                template: "<h1>User 用户id为{{id}}  姓名为:{{username}}  年龄为:{{age}}</h1>"
            }
            //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                path: '/user/:id',
                component: UserNum,
                props: route => ({
                    username: 'zx',
                    age: 20,
                    id: route.params.id
                })
            }, {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

8.命名路由

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link :to="{name:'user',params:{id:123}}">User3</router-link>

        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: "<h1>Register组件</h1>"
        };
        const UserNum = {
                props: ['id', 'username', 'age'],
                template: "<h1>User 用户id为{{id}}  姓名为:{{username}}  年龄为:{{age}}</h1>"
            }
            //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                name: 'user',
                path: '/user/:id',
                component: UserNum,
                props: route => ({
                    username: 'zx',
                    age: 20,
                    id: route.params.id
                })
            }, {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

9.编程式导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link :to="{name:'user',params:{id:123}}">User3</router-link>

        <router-link to="/register">Register</router-link>

        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router_3.0.2.js"></script>
    <script>
        const User = {
            template: "<h1>User组件</h1>"
        }
        const Register = {
            template: `<div>
                <h1>Register组件</h1>
                <button @click="goback">后退</button>
                </div>`,
            methods: {
                goback() {
                    this.$router.go(-1)
                }
            },
        };
        const UserNum = {
                props: ['id', 'username', 'age'],
                template: `<div>
                    <h1>User 用户id为{{id}}  姓名为:{{username}}  年龄为:{{age}}</h1>
                    <button @click="goRegister">跳转到注册页面</button>
                    </div>`,
                methods: {
                    goRegister() {
                        this.$router.push('/register')
                    }
                },
            }
            //创建路由实例对象
        const router = new VueRouter({
            //所有的路由规则
            routes: [{
                name: 'user',
                path: '/user/:id',
                component: UserNum,
                props: route => ({
                    username: 'zx',
                    age: 20,
                    id: route.params.id
                })
            }, {
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        });
        //创建vm实例对象
        const vm = new Vue({
            //指定控制区域
            el: '#app',
            //挂载路由实例对象

            data: {

            },
            router,
        });
    </script>
</body>

</html>

10.开启history模式

在这里插入图片描述

11.修改active路由的样式

在这里插入图片描述
在这里插入图片描述

江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初学Vue
01-20
在初学Vue时，首先要理解它的基本概念和核心特性。 1. **Vue实例**： 创建Vue实例是使用Vue.js开发应用的第一步。`new Vue()` 是用来创建一个Vue实例的构造函数。在提供的代码示例中，`el`属性用于指定Vue实例所...
Vue 实现重定向、404和路由钩子（六）
快乐的小三菊的博客
08-10 1513
Vue 实现重定向、404和路由钩子
前端网站开发页面重定向的几种方法
web前端的发展
06-26 1万+
html重定向就是通过各种的方法将各种网络请求重新定个方向转到其它位置。 在网站建设中，时常会遇到需要网页重定向的情况：像网站调整，如改变网页目录结构，网页被移到一个新地址，再或者，网页扩展名改变，如因应用需要把。php改成。Html或。shtml，在这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户还会得到一个404页面错误信息，访问流量白白丧失；再如某些注册了多个域...
前端学习（1276）:路由重定向
歌谣的博客
05-28 509
<!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 type="text/javascript" sr...
五大网页重定向方法
走走停停，停停走走……
10-12 639
做seo的，总有时候需要用到网页重定向。笔者整理了五种常用的方法，方便大家的使用。 一：body onload跳转法 这种方法也能够被搜索引擎识别。 二：meta refresh跳转法 上述html代码中的“10”是延时跳转的时间，单位是秒。如果设为0
前端开发：Vue路由传递参数和重定向的使用总结
软贱开发攻城狮
10-24 2374
前端开发过程中，作为前端开发者来说关于vue的使用并不陌生，vue相关常用的知识点也是非常重要的，不管是在实际开发中还是在求职面试中都很重要。在vue使用中，路由相关的知识点是非常重要的，而且在实际开发中也是必用知识点，那么本篇博文就来聊聊vue的路由参数传递和路由重定向相关的知识点。通过本文关于前端开发中Vue。
vue的路由demo.zip
06-21
Vue.js 是一款流行的前端JavaScript框架，它简化了Web应用程序的构建。Vue Router 是Vue.js官方推荐的路由管理器，用于处理单页面应用（SPA）...对于学习Vue.js和Vue Router的初学者来说，这是一个非常实用的实践项目。
Vue初学者入门学习笔记(包含实践demo)
08-01
Vue初学者入门学习笔记将引导你逐步掌握这个强大的框架。笔记中包括了Vue.js的基础概念、核心特性、组件化开发以及实战应用等方面的知识。 首先，Vue.js的核心概念包括响应式系统、指令（如v-if、v-for）、计算属性...
vue vuex vue-rouert后台项目——权限路由（适合初学）
11-30
Vue Router 是 Vue.js 的官方路由库，负责应用程序的页面导航和路由配置。 在这个项目中，我们看到如何在 Vue.js 中实现权限路由，这对于后台管理系统尤其重要。权限路由基于用户角色，只允许具有特定权限的用户...
Vue初学者必学知识点（含案例）
11-13
作为Vue初学者，了解并掌握以下关键知识点至关重要： 1. **基础概念**：首先，理解Vue的基本架构，包括实例、组件、指令、过滤器等。Vue实例是应用的核心，它持有数据和方法；组件是可复用的代码块，用于构建大型...
vue-router的实现原理_你可能不清楚的 Vue Router用法
weixin_39995297的博客
11-24 204
Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。路由元信息用途(1)验证用户身份，定义用户权限能访问的页面大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。(登录)验证身份方法：1...
【前端】转发重定向
高精尖发展
08-30 3912
前言：       最近……   正文： 重定向Reirect：通过各种方法将各种网络请求重新定个方向转到其他位置 重定向常见方式： 1、301redirect：永久转移Permanently moved，网页更改地址后对搜索引擎友好的最好方法        2、302redirect：暂时性转移Temporarily moved       当一个网站或网页在24到48小时之内...
关于前后端重定向
shanyikun的博客
04-15 6677
JAVA后端重定向用spring mvc 一般为return “redirect:/url” ,原生重定向为response.sendRedirect(“url”), 有时候spring mvc在重定向的时候会生成一个SESSIONID在浏览器的地址栏以url重写的方式出现，一般为;JSESSIONID=***的格式，这时可以用原生重定向response.sendRedirect(“url”)避...
HTML页面跳转的5种方法
ala617784513的博客
10-17 6940
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。 1) html的实现 <head> <!-- 以下方式只是刷新不跳转到其他页面 --> <meta http-equiv="refresh" content="10"> <!-- 以下方式定时转到其他...
js实现页面跳转重定向的几种方式
xin.wang的博客
02-29 1万+
js实现页面跳转重定向的几种方式 第一种： 复制代码 代码如下: window.location.href="http://shanghepinpai.com"; 第二种： 复制代码 代码如下: alert("返回"); window.history.back(-1); 第三种： 复制代码 代码如下: window.navigate("http
前端页面请求转发（forward）与重定向（redirect）
星河梦~的博客
12-26 6825
页面跳转有两种实现方式：请求转发和页面重定向。 请求转发（forward) 请求转发可以理解成是服务器端的行为。客户端发起一次请求，这个请求在整个服务端可以被多次传递，但都是由服务器端的处理程序传递给另一个处理程序，客户端不需要发起二次请求，无论这个请求经历过多少个处理程序，始终都是同一个请求，也就意味着，这个请求中的数据经历过的每一个程序都可以使用。在同一个请求中request范围中的数据不会丢失。 当使用了请求转发后，在客户端浏览器地址中不会显示出转向后的地址；服务器内部转发，整个过程处于同一个请求当中
盘点JAVA中五个重定向的方式
分享技术，共同进步!
07-08 1万+
日常开发中，时常要用到重定向，有时甚至是同一个请求需要根据不同的业务场景进行不同的重定向，下面总结了5种重定向的方式
关于使用HTML或JS实现页面重定向的方法
热门推荐
candy_tity的博客
11-29 1万+
所谓页面重定向就是在用户打开某个页面的时候，我们期望页面跳转到另一个指定的页面。在前端实现的过程中，可以通过HTML方式来实现，也可以通过JS方式来实现。HTML方式： 通过meta标签来实现。 示例代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="refr
vue初学者实战项目
最新发布
08-30
作为vue初学者，你可以尝试以下实战项目来提升你的技能： 1. TodoList应用：创建一个简单的任务清单应用，用户可以添加、编辑和删除任务。你可以使用vue的组件和状态管理来实现这个应用。 2. 天气应用：通过调用天气...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值