Vue中路由的基本使用

最新推荐文章于 2023-04-05 19:21:48 发布
最新推荐文章于 2023-04-05 19:21:48 发布
阅读量368 收藏
点赞数
分类专栏： Vue.js 组件化框架 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45248344/article/details/108805331
版权
前端 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
Vue.js
7 篇文章 0 订阅
订阅专栏
组件化框架
7 篇文章 0 订阅
订阅专栏

文章目录

Vue中的路由

后端路由是指服务器根据路径发送资源
前端路由是指页面根据路径切换不同的组件

  • 导入vue-router.js到项目目录
  • 在导入vue-router.js之后，在window全局对象中就有了一个路由的构造函数VueRouter
  • 在使用构造函数VueRouter构造对象时可传递一个配置对象
    • 在配置对象中使用routes属性指定匹配规则的数组
    • routes属性中的每一项都是一个匹配规则的对象
    • 匹配规则的对象有两个必须的属性：
      1. path : 表示监听的路由地址
      2. component : 表示如果路由匹配，则展示component指定的组件模板对象
        • component的属性值必须是一个组件的模板对象，不能是组件的引用名称
      • redirect : 表示重定向前端路径，修改#之后的路径，并不会发送请求
  • 在Vue实例中使用router属性指定构造的路由对象
  • 使用vue-router提供的<router-view>元素作为占位符，与路由规则匹配的组件将其替换
  • 使用vue-router提供的<router-link>元素作为切换链接
    • 使用<router-link>元素的to属性指定链接的路径
    • 使用<router-link>元素的tag属性指定被渲染成的元素
      • 默认渲染为<a>元素
        示例如下：
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = {
            template:'<h1>登录组件</h1>'
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        var routerobj = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register}
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router:routerobj
        });
    </script>
</body>
</html>

路由样式

  • 在当前路由对应的<router-link>元素链接上有样式router-link-active, 可修改里面的样式达到当前路由链接高亮
    • 也可修改默认的样式类：
      • 在使用构造函数VueRouter构造对象时配置对象中使用linkActiveClass属性指定样式名即可修改默认的router-link-active样式类
        例如；
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
    <style type="text/css">
        .router-link-active{
            color: tomato;
        }
        .myactive{
            color: darkgoldenrod;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = {
            template:'<h1>登录组件</h1>'
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        var routerobj = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router:routerobj
        });
    </script>
</body>
</html>

路由切换动画

  • 使用<transition>元素将<router-view>元素包含在内
  • 定义过渡样式类
  • 使用<transition>元素的mode属性设置过渡的模式
    示例如下：
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
    <style type="text/css">
        .router-link-active{
            color: tomato;
        }
        .myactive{
            color: darkgoldenrod;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script>
        var login = {
            template:'<h1>登录组件</h1>'
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        var routerobj = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router:routerobj
        });
    </script>
</body>
</html>

路由规则中传参

  • 方式一：
    • 给路由传参不需要修改路由规则的path属性
    • 使用的传参方式为问号传参
    • 通过组件对象的$route属性中包含参数等信息，通过该属性的query属性可得到传递的参数
      例如：
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login?id=10&name=e">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = {
            template:'<h1>登录组件  ----  {{ $route.query.id + " -- " + $route.query.name }}</h1>',
            created(){
                console.log(this.$route.query)
            }
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        var router = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router
        });
    </script>
</body>
</html>
  • 方式二：
    • 路由的匹配规则使用/:加参数名的形式传参
      • 需匹配到每一个/:加参数的路径
        例如：
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login/101/lisi">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = {
            template:'<h1>登录组件 --- {{ $route.params }}</h1>',
            created(){
                console.log(this.$route.params)
            }
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        var router = new VueRouter({
            routes:[
                {path:'/',redirect:'/login/104/zhangsan'},
                {path:'/login/:id/:name',component:login},
                {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router
        });
    </script>
</body>
</html>

路由的嵌套

  • 在匹配规则的对象中使用children属性指定子路由
    • 子路由与其父路由相似，但不同的是path属性中无/
    • 若path以/开始，则从根路径开始匹配
      例如：
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/account">Account</router-link>
        <router-view></router-view>
    </div>
    <template id="tem1">
        <div>
            <h1>Account</h1>
            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>
        var login = {
            template:'<h1>登录组件</h1>'
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }
        var account = {
            template:'#tem1'
        }
        var router = new VueRouter({
            routes:[
                {
                    path:'/account',
                    component:account,
                    children:[{
                        path:'login',
                        component:login
                    },{
                        path:'register',
                        component:register
                    }]
                }
                // {path:'/account/login/:id/:name',component:login},
                // {path:'/account/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router
        });
    </script>
</body>
</html>

命名视图

  • 可以在路由的匹配规则的对象中使用components属性指定多个组件模板对象
  • 将多个的组件模板对象封装为一个对象，使用不同的属性指定相应的一个组件模板对象
  • 与每个组件模板对象对应的属性名用于在<router-view>元素中的name属性上
  • 根据<router-view>元素中的name属性将其渲染对应组件
    例如：
<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
    <style type="text/css">
        .header{
            background-color: lightslategray;
            height: 100px;
        }
        /* .left{
            float: left;
        } */
        /* .main{
            float: right;
        } */
        .container{
            display: flex;
            height: 800px;
        }
        h1{
            margin: 0;
            padding: 0;
        }
        html,body{
            margin: 0;
            padding: 0;
        }
        .left{
            background-color: black;
            color: cornflowerblue;
            flex: 2;
        } 
        .main{
            background-color: bisque;
            flex: 8;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-link to="/account">Account</router-link>
        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
    <script>
        var header = {
            template:'<h1 class="header">头部</h1>'
        }
        var left = {
            template:'<h1 class="left">侧边栏</h1>'
        }
        var main = {
            template:'<h1 class="main">主页</h1>'
        }
        var router = new VueRouter({
            routes:[
                {path:'/',components:{default:header,left:left,main:main}}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router
        });
    </script>
</body>
</html>

数据监听

  • 使用Vue实例的watch属性可以监听到data中数据的改变，并且触发对应的处理函数
  • watch属性指定的是一个对象，其中的属性可以是data中被监听的数据变量名
    • 若变量名中有-，则将此变量名用作属性时需加' '包含
    • 属性值为一个处理函数对象，函数可传参有newVal、oldVal
      • newVal : 表示当前属性对应的数据监听到改变前的值
      • newVal : 表示当前属性对应的数据监听到改变后的值
        例如：
<!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" src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstname"> + 
        <input type="text" v-model="lastname"> = 
        <span>{{ fullname }}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                lastname:'',
                firstname:'',
                fullname:''
            },
            methods: {
                
            },
            watch:{
                firstname:function(newVal,oldVal){
                    // this.fullname = this.firstname + "-" + this.lastname;
                    this.fullname = newVal + "-" + this.lastname;
                },
                lastname:function(newVal,oldVal){
                    // this.fullname = this.firstname + "-" + this.lastname;
                    this.fullname = this.firstname + "-" + newVal;
                },
            }
        });
    </script>
</body>
</html>

路由监听

例如：

<!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" src="./vue.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
    <style type="text/css">
        .router-link-active{
            color: tomato;
        }
        .myactive{
            color: darkgoldenrod;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script>
        var login = {
            template:'<h1>登录组件</h1>'
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        var routerobj = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                
            },
            router:routerobj,
            watch:{
                '$route.path':function(newVal,oldVal){
                    console.log(newVal + " ---- " + oldVal)
                }
            }
        });
    </script>
</body>
</html>

计算属性

  • 在Vue实例中使用computed属性
    • 在computed中可以定义一些属性，即计算属性
    • 计算属性的本质为一个方法，只是使用时将其名称直接当作属性使用的
    • 并不将计算属性当作方法调用
  • 计算属性中所用到的data中的数据一旦发生变化，就会重新计算该计算属性的值
  • 计算属性的求值结果会被缓存，便于下次使用，若该计算属性对应的方法中所用到的数据都未更改过，则其不会重新求值
    示例如下：
<!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" src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstname"> + 
        <input type="text" v-model="lastname"> = 
        <span>{{ fullname }}</span><br/>
        <span>{{ fullname }}</span><br/>
        <span>{{ fullname }}</span><br/>
        <span>{{ fullname }}</span><br/>
        <span>{{ fullname }}</span><br/>
        <span>{{ fullname }}</span><br/>
        <span>{{ fullname }}</span><br/>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                lastname:'',
                firstname:''
            },
            methods: {
                
            },
            computed:{
                'fullname':function(){
                    console.log('run //')
                    return this.firstname + ' - ' + this.lastname
                }
            }
        });
    </script>
</body>
</html>

computed、watch、methods区别

  • computed
    • 计算属性需返回值
    • 重在结果数据（依赖的数据都被监听）
    • 结果缓存，依赖数据改变则重新计算，主要当作属性使用
  • watch
    • 一般不需要返回值
    • 重在更改的数据
    • 可看作为methods与computed的结合体
  • methods
    • 表示一个具体操作，主要为业务逻辑
斜月!三星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router八个重要知识点应用图解
tomorrownan的博客
04-09 2334
路由就是根据不同的地址跳到不同的页面。说到前端路由不得不提单页面应用。单页面应用页面进行切换时，视觉上感觉是页面的切换，单其实页面一直没有刷新。只是通过js让页面看起来像是到了另外一个页面。Vue Router是Vue.js的官方路由器。它与Vue.js核心集成，使得使用Vue.js构建单页应用程序变得轻而易举。 本文讲解功能如下： 1.安装 2.路由如何应用的 3.路由参数 4.路由嵌套 5....
(八)vue-route
lyj_010的博客
11-19 334
vue-route
Vue-router中path的设置
五花漏的博客
02-16 2053
Vue-router配置项
Vue源码 Vue Router（三）matcher 路由匹配器
陈坚泓的博客
06-20 5527
Vue源码 Vue Router（三）matcherVue源码 Vue Router（三）matchermatchercreateMatcheraddRoutesmatch总结Vue源码学习目录 Vue源码 Vue Router（三）matcher 学习内容和文章内容来自 黄轶老师 黄轶老师的慕课网视频教程地址:《Vue.js2.0 源码揭秘》、 黄轶老师拉钩教育教程地址:《Vue.js 3.0 核心源码解析》 这里分析的源码是Runtime + Compiler 的 Vue.js 调试代码在:node_
VUE-路由详解
damadashen的博客
05-14 2535
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
vue中路由的使用详解
11-30
vue中路由的使用详解，喂到嘴里的教程
Vue中路由实现后台管理系统
05-15
Vue中路由实现一个简单的后台管理系统，数据都是固定的，没有用到数据库，主要是练习路由的使用，有需要的拿去练习
vue脚手架及vue-router基本使用
08-27
主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下
vue中路由vue-router的使用和生命周期
01-06
vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 编程式 router.push(...) 1.通过query传参 query传参会把参数显示在地址栏，类似于get传参，但是如果网页刷新参数...
vue中路由验证和相应拦截的使用详解
11-26
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: false }, mutations: { // 登录 login (state, user) { state.user = user }, // 退出 ...
谷歌repo源码
05-21
使用谷歌的repo工具管理git仓代码，repo init; repo sync
vue-router源码解析（四）路由匹配规则
weixin_34198453的博客
01-29 6212
前面我们讲过，在使用 vue-router 的时候，主要有以下几个步骤： // 1. 安装 插件 Vue.use(VueRouter); // 2. 创建router对象 const router = new VueRouter({ routes // 路由列表 eg: [{ path: '/foo', component: F...
repo init 失败
zhbpd的专栏
12-19 2772
root@68b3ebd4a7ab:~/aosp# python3 ~/.bin/repo init -u https://aosp.tuna.tsinghua.edu.cn/platform/manifest -b android-9.0 .0_r40 Traceback (most recent call last): File "/root/aosp/.repo/repo/main.py", line 42, in <module> from git_config impor.
2、动态路由
MoonNight608的博客
02-29 375
目录动态路由响应路由参数的变化捕获所有路由或者 404 not found 路由高级匹配模式路由匹配优先级 动态路由 需要把某种模式匹配到所有的路由，全部映射到同个组件时。我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果： const Use...
Vue学习日记之vue-router
qq_124917348的博客
07-13 267
1、Vue-router的基本使用 创建一个vue-router对象routerObj 在这个对象中配置对象，使用routes创建一组路由规则，{path:"url",component:组件名} 编写匹配该url后要展示的组件对象，这个组件对象必须是一个全局对象，无需注册 在Vue实例中添加router对象，形式为：router:'routerObj' ...
python基础语法测评_Python语法知识点，Python入门语法总结
weixin_39911916的博客
11-23 124
最近发现进入python群的朋友都在你是如何自学python语法的，每当被问到这个问题时，我内心是坦荡的，因为我不知道到底我接下来说的这些话会给看到的各位带来什么？虽然大家已经对Python已经有了一个初步认识 了，但是我还不得不说关于Python语法的一些事，以便于我这个装逼的过程顺利的完成，只针对有经验开发人员简单输入输出输出print 10 , '十'输入name = raw_input()...
Python高阶知识之属性管理
最新发布
yifengchaoran的专栏
04-05 595
属性管理机制主要是为控制对类属性的访问、更新、删除等的操作，借此可实现对属性访问行为的定制化控制，或者变相实现真正的私有属性或变量的需求。Python随着版本更新和功能演变迭代，大体实现了3大类的属性管理机制，对应应用场景和抽象程度各有不同，以下会分别介绍。这个内置属性，可以控制某类实例对象（注意，不包含类属性，以及方法）可定义的属性名范围。相较于不使用__slots__，可显著提升属性访问速度，如果在设计类时，已明确有哪些实例属性，可采用该方式框死属性范围，避免误操作并提升代码执行效率。
I.MX6 yocto project build
MashiMaroJ的专栏
08-11 687
I.MX6 yocto project build
前端路由vue-router
huangyh技术栈
05-10 281
1.1 什么是vue-router vue-router就是vue官方提供的一个路由框架。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是，将组件（components）映射到路由（routes），然后告诉vue-router在哪里渲染它们。 1.2 初始化工程 # 全局安装 vue-cli npm install -g ...
vue中路由的实现方式
03-28
Vue中路由的实现方式有两种：hash模式和history模式。 1. hash模式 在hash模式下，路由信息会保存在URL的hash中，以#号开头。例如：http://localhost:8080/#/home。Vue Router会监听URL的变化，当URL的hash发生...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值