Vue前端路由~非常详细哦，不要错过

最新推荐文章于 2024-05-13 16:59:11 发布
最新推荐文章于 2024-05-13 16:59:11 发布
阅读量320 收藏 3
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46370867/article/details/113189278
版权

下面是对Vue前端路由的整理，希望可以帮助到有需要的小伙伴~

文章目录

目标

能够说出路由的概念
　　能够说出Vue-router的基本使用步骤
　　能够说出Vue-router的嵌套路由用法
　　能够说出Vue-router动态路由匹配用法
　　能够说出Vue-router命名路由用法
　　能够说出Vue-router编程式导航用法
　　能够基于路由的方式实现业务功能

目录

路由的基本概念与原理
　　vue-router的基本使用
　　vue-router嵌套路由
　　vue-router动态路由匹配
　　vue-router命名路由
　　vue-router编程式导航
　　基于vue-router的案例

路由的基本概念与原理

路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系
在开发中，路由分为：
后端路由
前端路由

后端路由

概念：根据不同的用户 URL 请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系
在这里插入图片描述

SPA(Single Page Application)
  • 后端渲染（存在性能问题）
  • Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作，不能缓存用户操作）
  • SPA（Single Page Application）单页面用用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
  • SPA实现原理之一：基于URL地址的hash（hash的变化导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
  • 在实现SPA过程中，最核心的技术就是前端路由
前端路由
  • 概念：根据不同的用户事件，显示不同的页面内容
  • 本质：用户事件与事件处理函数之间的对应关系
    在这里插入图片描述

总结：

后端路由实现URL请求地址与服务器资源之间的对应关系，但是后端路由性能差，就出现了SPA，SPA最核心的功能是前端路由，前端路由实现用户事件与事件处理函数之间的对应关系

前端路由负责事件监听，触发事件后，通过事件函数渲染不同的内容。

实现简易前端路由
  • 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
    在这里插入图片描述

监听hash的变化：

//监听windows的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
windows.onhashchange = function(){
    //通过location.hash获取到最新的hash值
}

实例：实现动态切换

链接：https://pan.baidu.com/s/1UT8srDLaBgxIiFIvjjTsBA
提取码：3ouk

<!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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        <!--根据：is属性指定的组件名称，把对应的组件渲染到component标签所在的位置 -->
        <!--可以吧component标签当做是组件的占位符-->
        <!-- :is="conName" 绑定组件 -->
        <component :is="conName"></component>
    </div>
    <script>
        //定义需要切换的四个组件
        //主页组件
        const zhuye = {
            template: '<h1>主页信息</h1>'
        }
        //科技组件
        const keji = {
            template: '<h1>科技信息</h1>'
        }
        //财经组件
        const caijing = {
            template: '<h1>财经信息</h1>'
        }
        //财经组件
        const yule = {
            template: '<h1>娱乐信息</h1>'
        }
        const vm = new Vue({
            el: '#app',
            data: {
                conName: 'zhuye'
            },
            //注册组件
            components: {
                zhuye,
                keji,
                caijing,
                yule
            },
        })
        // 监听hash的变化
        //监听window事件的onhashChange事件,根据获取到的最新的hash值，切换要显示的组件的名称
        window.onhashchange = function () {
            //通过location.hash获取到最新的hash值
            console.log(location.hash);
            // #/zhuye #/keji  #/caijing #/yule 
            // slice(1) 从索引值为1的地方开始截取，就并不回截取#了
            switch (location.hash.slice(1)) {
                case '/zhuye':
                    vm.conName = "zhuye"
                    break;
                case '/keji':
                    vm.conName = "keji"
                    break;
                case '/caijing':
                    vm.conName = "caijing"
                    break;
                case '/yule':
                vm.conName = "yule"
                break;
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

Vue Router

Vue Router（官网：https://router.vuejs.org/zh/）是Vue.js官方的路由管理器.

它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有：
支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

vue-router的基本使用

基本使用步骤

  1. 引入相关的库文件
//导入vue文件，为全局window对象挂载Vue构造函数
<script src="./lib/vue_2.5.22.js"></script>
//导入vue-router文件，为全局window对象挂载VueRouter构造函数
<script src="./lib/vue-router_3.0.2.js"></script>
// 顺序不能改
  1. 添加路由链接
<!-- router-link是vue中提供的标签，默认会被渲染为a标签 -->
<!-- to属性默认会被渲染为href属性 -->
<!-- to属性的值默认会被渲染为#开头的hash地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
  1. 添加路由填充位
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 -->
<router-view></router-view>
  1. 定义路由组件
var User = {
    template:'<div>User组件</div>'
}
var Register = {
    template:'<div>Register组件</div>'
}
  1. 配置路由规则并创建路由实例
//创建路由实例对象
var router = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展示的组件
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})
  1. 把路由挂载到Vue根实例中
new Vue({
    el:'#app',
    //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
    router
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-router的基本使用</title>
    <!-- 1. 引入相关的库文件 -->
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <!-- 被 vm实例 控制的区域 -->
    <div id="app">
        <!-- 2.添加路由链接  -->
        <!-- router-link是vue中提供的标签，默认会被渲染为a标签 -->
        <!-- to属性默认会被渲染为href属性 -->
        <!-- to属性的值默认会被渲染为#开头的hash地址 -->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
        <!-- 3.添加路由填充位  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 -->
        <router-view></router-view>

    </div>
    <script>
        // 4. 定义路由组件
        var User = {
            template:'<div>User组件</div>'
        }
        var Register = {
            template:'<div>Register组件</div>'
        }

        // 5. **配置路由规则并创建路由实例**
        //创建路由实例对象
        var router = new VueRouter({
            //routes是路由规则数组
            routes:[
                //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
                //path表示当前路由规则匹配的hash地址
                //component表示当前路由规则对应要展示的组件
                {path:'/user',component:User},
                {path:'/register',component:Register}
            ]
        })
        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: "#app",
            data: {},
            // 6. 把路由挂载到Vue根实例中
            // 挂载路由实例对象
            // router: router
            // 属性名 与 属性值 是一样的，可简写为一个
            router
        })
    </script>
</body>
</html>

image-20210122121532378.png

在这里插入图片描述

路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向：

// 路由实例对象
var router = new VueRouter({
    // 所有路由规则
    routes:[
    //其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
    {path:'/',redirect:'/user'}, // 访问/的时候，强制访问/user
    {path:'/user',component:User},
    {path:'/register',component:Register}
    ]
})

在这里插入图片描述

vue-router嵌套路由

嵌套路由用法

嵌套路由功能分析
　　点击父级路由链接显示模板内容
　　模板内容中又有子级路由链接
　　点击子级路由链接显示子级模板内容

父路由组件模板
  • 父级路由链接
  • 父组件路由填充位
<p>
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>
</p>
<div>
    <!-- 控制组件显示位置 -->
    <router-view></router-view>
</div>

子级路由模板

子级路由链接
子级路由填充位

const Register = {
    template:`<div>
        <h1>Register组件</h1>
        <hr/>
        <router-link to="/register/tab1">Tab1</router-link>
        <router-link to="/register/tab1">Tab1</router-link>
        //子路由填充位置
        <router-view/>
    </div>`
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套路由</title>
    <!-- 1. 引入相关的库文件 -->
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <!-- 被 vm实例 控制的区域 -->
    <div id="app">
        <!-- 2.添加路由链接  -->
        <!-- router-link是vue中提供的标签，默认会被渲染为a标签 -->
        <!-- to属性默认会被渲染为href属性 -->
        <!-- to属性的值默认会被渲染为#开头的hash地址 -->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
        <!-- 3.添加路由填充位  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 -->
        <router-view></ro uter-view>

    </div>
    <script>
        // 4. 定义路由组件
        var User = {
            template:'<h1>User组件</h1>'
        }
        var 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 />
                </div>
            `
        }

        // 子路由组件
        const Tab1 = {
            template: '<h3>tab1 子组件</h3>'
        }

        const Tab2 = {
            template: '<h3>tab2 子组件</h3>'
        }

        // 5. **配置路由规则并创建路由实例**
        //创建路由实例对象
        var router = new VueRouter({
            //routes是路由规则数组 ,路由规则的作用：匹配链接和组件之间的关系
            routes:[

                //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
                //path表示当前路由规则匹配的hash地址
                //component表示当前路由规则对应要展示的组件
                {path:'/',redirect:'/user'}, // 访问/的时候，强制访问/user
                {path:'/user',component:User},
                {path:'/register',component:Register,children: [
                    {path: '/register/tab1',component: Tab1},
                    {path: '/register/tab2',component: Tab2}
                ]}
            ]
        })
        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: "#app",
            data: {},
            // 6. 把路由挂载到Vue根实例中
            // 挂载路由实例对象
            // router: router
            // 属性名 与 属性值 是一样的，可简写为一个
            router
        })
    </script>
</body>
</html>

在这里插入图片描述

嵌套路由配置

父级路由通过children属性配置子路由

var router = new VueRouter({
    routes:[
        {path:'/user',component:User},
        {
            path:'/register',
            component:Register,
            //通过children属性，为/register添加路由规则
            children:[
                {path:'/register/tab1',component:Tab1},
                {path:'/register/tab2',component:Tab2}
            ]
        }
    ]
})

vue-router动态路由匹配

动态匹配路由的基本用法

思考：

//有如下3个路由链接
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
//定义如下三个对应的路由规则，是否可行？？？
{path:'/user/1',component:User}
{path:'/user/2',component:User}
{path:'/user/3',component:User}
//上述做法存在的问题是：如果有N个路由链接则需要写N个相似的路由规则，动态路由可以解决这个问题

把路由的变化的数据使用路由参数来代替。

动态路由的应用场景：通过动态路由参数的模式进行路由匹配

路由链接和路由组件相应的改变

// 路由链接
var router = new VueRouter{(
    routes:[
    //动态路径参数以冒号开头
    // 在路径后自定义一个参数 :自定义名称 ，接收动态变化的数据
        {path:'/user/:id',component:User}
    ]
)}
// 路由组件
const User = {
    //路由组件中通过$route.params获取路由参数
    template:'<div>User{{$route.params.id}}</div>'
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态路由匹配规则</title>
    <!-- 1. 引入相关的库文件 -->
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>
<body>
    <!-- 被 vm实例 控制的区域 -->
    <div id="app">
        <!-- 2.添加路由链接  --> 
        <!-- router-link是vue中提供的标签，默认会被渲染为a标签 -->
        <!-- to属性默认会被渲染为href属性 -->
        <!-- to属性的值默认会被渲染为#开头的hash地址 -->
        <router-link to="/user/1">User/1</router-link>
        <router-link to="/user/2">User/2</router-link>
        <router-link to="/user/3">User/3</router-link>
        <router-link to="/register">register</router-link>
        <!-- 3.添加路由填充位  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 -->
        <router-view></router-view>

    </div>
    <script>
        // 4. 定义路由组件
        var User = {
            template:'<h1>User组件 -- 用户id为：{{$route.params.id }}</h1>'
        }
        var Register = {
            template:'<h1>Register组件</h1>'
        }

        // 5. **配置路由规则并创建路由实例**
        //创建路由实例对象
        var router = new VueRouter({
            //routes是路由规则数组
            routes:[

                //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
                //path表示当前路由规则匹配的hash地址
                //component表示当前路由规则对应要展示的组件
                {path:'/',redirect:'/user'}, // 访问/的时候，强制访问/user
                {path:'/user/:id',component: User},
                {path:'/register',component:Register}
            ]
        })
        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: "#app",
            data: {},
            // 6. 把路由挂载到Vue根实例中
            // 挂载路由实例对象
            // router: router
            // 属性名 与 属性值 是一样的，可简写为一个
            router
        })
    </script>
</body>
</html>

在这里插入图片描述

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

props的值为布尔类型 （只接收动态数据）
const router = new VueRouter({
    routes:[
        //如果props被设置为true,route.params将会被设置为组件属性
        // props被设置为true,就开启了 动态传参
        {path:'/user/:id',component:User,props:true}
    ]
})    
const User = {
    props:['id'],//使用props接收路由参数
    template:'<div>用户ID:{{id}}</div>'//使用路由参数
}
props的值为对象类型：（问题：可以接收props对象里面的静态数据，不能接收动态数据）
const router = new VueRouter({
    routes:[
        //如果props是一个对象，他会被按原样设置为组件属性
        {path:'/user/:id',component:User,props:{uname:'lisi',age:12}}
    ]
})
const User = {
    props:['uname','age'],
    template:'<div>用户信息:{{ uanme + '---' + age }}</div>'//使用路由参数
}
props的值为函数类型：（可以接收 props对象里面的 动态数据 和 静态数据）
const router = new VueRouter({
    routes:[
        //如果props是一个函数，则这个函数接收route对象为自己的形参
        {path:'/user/:id',
          component:User,
          props:route => {uname:'lisi',age:12,id:route.params.id}}
    ]
})
const User = {
    props:['uname','age',id],
    template:'<div>用户信息:{{ uanme + '---' + age + '---' + id }}</div>'//使用路由参数
}

vue-router命名路由

命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为"命名路由"。

const router = new VueRouter({
    route:[
        {
            path:'/user:id',
            name:'user',
            component:User
        }
    ]
})

命名路由的使用

<!-- 通过name:'user'指定要跳转的路由 
	 params:{id:123} 携带的参数
-->
<router-link :to="{name:'user',params:{id:3}}">User</router-link>
router.push({name:'user',params:{id:123}})

vue-router编程式导航

页面导航的两种方式

声明式导航:

通过点击链接实现导航的方式，叫做声明式导航

先声明标签，再实现导航

例如：普通网页中的<a></a>链接 或 vue中的<router-link></router-link>

编程式导航

通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的location.href

编程式导航基本用法

常用的编程式导航API如下：

  • this.$router.push('hash地址')
// 根据'hash地址  跳转到特定的组件页面

  • this.$router.go(n)
    • n的值为1，表示在页面的浏览记录中前进一步
    • n的值为-1，表示在页面的浏览记录中后退一步
this.$router.push('hash地址')
this.$router.go(n)
const User = {
    template:'<div><button @click="goRgister">跳转到注册页面</button></div>',
    methods:{
        goRegister:function(){
            //用编程的方式控制路由跳转
            this.$router.push('/register');
        }
    }
}

编程式导航参数规则

router.push()方法的参数规则
//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由（传递参数）
router.push({name:'/user',params:{userId:123}})
//带查询参数，变成/register?uname=lisi
router.push({path:'/register',query:{uname:'lisi'}})

end~

weixin_46370867
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
router vue 多个路径_Vue-router
weixin_42166105的博客
12-30 2149
一、路由配置在一开始用CLi3脚手架创建项目时就已经安装了Vue-Router，下面直接看下初始代码：//main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; //引入router import store from "./store"; Vue.config.prod...
vue-router -- 动态路由匹配
骑着毛驴的小猴子
09-07 7720
一、概述 使用场景： 根据商品的id返回指定商品的详情页 匹配规则 模式 匹配路径 $route.params /user/:username /user/Jack {username=’Jack’} /user/:username/post/:post_id /user/Jack/post/123 {username=’Jack’,post_id=’123’} 二
Vue 一套构建用户界面的渐进式的框架 （路由篇~）
Jine
11-04 1191
此块知识内容基础，没有官方文档全，仅供参考 概述（了解） 单页面富用阶段（SPA） SPA 主要的特点是在前后端分离（后端只提供API来返回数据，前端通过Ajax获取到的数据渲染到页面）的基础上加了一层前端路由 也就是由前端来维护一套路由规则 前端路由的核心：改变URL，但页面不进行整体的刷新 （俩种方法：1、URL的hash 2、H5的history模式：pushState、replaceState） vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular的ngR
2024年前端最新vue-router路由详解，读完我这份《前端开发核心源码精编解析》面试至少多要3K
最新发布
2401_84619938的博客
05-13 874
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
vue component标签_25. vue-router
weixin_39821874的博客
11-25 113
重点：路由的跳转；路由参数的传递；安装 vue-router在使用 vue-cli 初始化项目时，会提示我们是否要安装 vue-router（路由），如：一般项目中，我们都会用到路由，所以选择“y”，安装路由。路由的跳转我们先来看一个简单的路由文件 index.js ：import Vue from 'vue' import Router from 'vue-router' // 1. 引入 v...
vue router alias 同一页面配置 两个不同的path 路径
小羽向前跑
07-28 5926
效果 注意顶部路径变化 router.js 路由页面配置 使用 alias:’‘ 配置其他路径即可 import Vue from 'vue' import Router from 'vue-router' import index from '@/components/index' import son2 from '@/components/son2' Vue.use(Rou...
Vue Router 嵌套路由中, 子路由path路径带 ‘/‘ 与不带的区别
weixin_43123984的博客
09-21 1732
定义的路径 path 没有书写。在定义 path 没有书写。在定义 path 有书写。定义 path 前有书写。定义 path 有书写。
vue中的路由router详解
weixin_42661283的博客
02-18 746
路由（router） 后端路由：所有的超链接都是URL地址，所有的URL地址都定义服务器上对应的资源 前端路由：对于单页面应用程序来说，通过URL中的hash值（#号）来实现不同页面之前的切换 hash有一个特点：http请求中不会包含hash相关的内容，所以，单页面应用程序中的页面跳转主要是用hash实现 路由的基本使用 引入文件（vue.js和vue-router.js） 创建路由对...
获取当前路由的祖先级对象
m0_59628052的博客
07-11 423
路由.........................
记vue多级目录一次教训
huangruifeng的博客
07-11 1147
问题描述：实现3级或多于3级目录时，无法成功加载指定的页面组件，页面path，component等都设置正确 原始创建动态路由代码如下： function buildRouters(routers, menutree) { if (!menutree) { return } menutree.forEach(function(item) { let routerItem...
Vue-router中path的设置
give it a try
07-04 6628
下定决心，好好过一天 ~ 最开始死活不知道是按照什么个原则去设置路径的，一直以为，这个设置的路径是有一个相对路径的。导致引用的时候一直错。 path的路径设置是自己直接设置的，不管它在哪里，自己都可以定义他的路径名，而router-link引用的时候，，那个路径就是你自己设置的，自己设置的相对路径（逻辑路径）。不存在他文件在哪的路径问题。 routes: [ // { // path: '/', // name: 'HelloWorld', // componen
vue-router 路由怎么传递一个或多个参数？
u011200562的博客
07-18 4133
声明式导航用在直接渲染到页面 编程式导航用于在js中处理逻辑后需要页面进行跳转 vue-router中传递参数主要分两大类： 编程式的导航 router.push 声明式的导航 < router-link > 本文主要演示一下编程式导航 router.push 传递参数的实现。 第一种是 命名路由,也成路由参数，第二种是查询参数 先演示使用 params 只传递一个参数的写法 只传递一个参数，直接在path中添加 /:id (取名根据实际需要)来对应 $router.push 中pat
vue @路径_Vue路由多路径配置同一个组件
weixin_39634132的博客
11-22 1008
是不是经常会有这样的情况，两个组件的内容基本一致，比如下面这样：最简单的方式可以直接用两个组件，逻辑完全分开，好配置好操作，就是代码重复的多。这样的情况，建议用一个组件，通过路由的配置，最大程度实现代码的重用，操作过程如下：children: [ { path: 'checked', name: 'checked', component: () ...
Vue之路由路径path配置的一个坑总结【同级路由path必须唯一】
热门推荐
weixin_43343144的博客
04-09 1万+
vue2 router 动态传参，多个参数
09-06 1万+
1、不显示在url中 比如有个路由跳转时需要带两个参数：<router-link to='/straight'>查看</router-link>可以这样写 <router-link to='/straight/goodId/skuId'>查看</router-link>然后去router.js 中 处理这个路由import Vue from 'vue' import Router from 'vu
Vue-router多级路由基本操作（合理解决多个嵌套的公共页面）
weixin_43575792的博客
03-04 4457
Vue-router多级目录基本操作前言一、操作步骤1.router配置2.router-view使用总结 前言 最近在项目中遇到了一个新需求，虽然通过router一级路由也可以实现最终效果，但会导致代码冗余过多，不利于模块化，由此决定学习并使用Vue-router多级目录 一、操作步骤 1.router配置 首先，我们要在项目中建立router文件夹，并在里面创建好index.js，以博主的需求举例子，项目里有两个一级目录，登录和展示，展示页下有三个小目录 以下就是博主的index.js配置，在一级目
Vue 一个网站如何实现两个菜单路由
qq_32687373的博客
09-09 3241
极少有这种奇怪的需求，去年遇到的，一直没有整理，现在有时间整理了，尴尬的是项目的登录密码忘了。。。没办法调试了。。但是大体的思路是这样的 需求 网站原本有一个菜单列，现在用户希望点击某行数据的时候，弹出一个新的页面，同时左侧加载一个新的菜单。之前的菜单对应的是项目的各种信息列表，新菜单对应的是单个项目的各项信息明细。 步骤 首先熟悉当前项目的路由相关的代码：加载位置，是否格式化数据等； 先写个固定路由，这些路由可以使用，但不会影响当前目录，所以登录页面的路由在哪里，这些路由就可以写在哪里（当时没主要
Vue前端面试精华：MVVM、路由与状态管理详解
前端框架Vue在面试中经常被提及，因为它是一个流行的JavaScript框架，用于构建用户界面。以下是关于Vue面试中可能会被问到的一些关键知识点： 1. **MVVM架构** - MVVM（Model-View-ViewModel）是一种设计模式，其中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值