vue笔记-6 vue中router路由 路由参数的传递 嵌套路由

最新推荐文章于 2024-06-25 23:30:01 发布
最新推荐文章于 2024-06-25 23:30:01 发布
阅读量453 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47734729/article/details/108979698
版权

Vue中的路由

VueRouter

路由:根据请求的路径按照一定的路由规则 进行的请求转发 从而帮助我们实现请求的管理

作用:在vue中实现组件的动态切换

在线引入路由的cdn:
`

` 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <!-- 根据连接切换不同的路由组件 -->
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>

    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //创建登录的组件
    const login = {
        template:" <div>  <h1>登录</h1>  </div> "
    };

    //创建注册的组件
    const register = {
        template:" <div>  <h1>注册</h1>  </div> "
    };

    //创建路由对象
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由规则  设置请求路径  path: 路由的路径  component:路径对应的组件
            {path:'/login',component:login},
            {path:'/register',component: register}
        ]
    });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //注册组件
            login,
            register
        },
        //注册路由对象
        router:route
    });

</script>


</body>
</html>

在这里插入图片描述

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

router-link

作用:用来替换我们在切换路由时a标签切换路由 不需要手动加入 #

1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签

默认路由

path:'/' ,redirect:'/***'
作用:用来第一次接入界面所展示的一个默认的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <!-- 根据连接切换不同的路由组件 -->
    <!--router-link 好处:书写路由路径不需要# to: 用来书写路由路径 -->
    <router-link to="/login" >我要登录</router-link>
    <router-link to="/register" >点我注册</router-link>

    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //创建登录的组件
    const login = {
        template:" <div>  <h1>登录</h1>  </div> "
    };

    //创建注册的组件
    const register = {
        template:" <div>  <h1>注册</h1>  </div> "
    };

    const def= {
        template: " <div>  <h1>默认显示的组件</h1> </div> "
    };

    //创建路由对象
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由规则  设置请求路径  path: 路由的路径  component:路径对应的组件
            {path: '/' ,redirect:'/def'},
            {path:'/def',component: def},
            {path:'/login',component:login},
            {path:'/register',component: register}
        ]
    });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //注册组件
            login,
            register,
            def
        },
        //注册路由对象
        router:route
    });

</script>


</body>
</html>

在这里插入图片描述

在这里插入图片描述

路由中参数的传递

通过?号形式拼接参数 和 采用restful风格 拼接参数

使用? 形式拼接参数时
组件获取参数 $route.query.参数名

使用restful 传递参数时

路由规则:var router = new VueRouter({ routes:[ {path:'/register/:参数名/:参数名',component:组件对象} //定义路径中获取对应参数 ] });

组件获取参数 $route.params.参数名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

<!--    使用?拼接-->
    <router-link to="/login?id=999&name=小新" >我要登录</router-link>

<!--    使用restful风格-->
    <router-link to="/register/111/小白" >点我注册</router-link>

    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //创建登录的组件
    const login = {
        template:'<h1>用户登录{{ this.$route.query.id }} {{ this.$route.query.name }}</h1>',
    };

    //创建注册的组件
    const register = {
        template:'<h1>用户注册 {{ $route.params.id }} {{ $route.params.name }}</h1>',
        created(){
            console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
        }
    };


    const def= {
        template: " <div>  <h1>默认显示的组件</h1> </div> "
    };

    //创建路由对象
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由规则  设置请求路径  path: 路由的路径  component:路径对应的组件
            {path: '/' ,redirect:'/def'},
            {path:'/def',component: def},


            {path:'/login',component:login},
            {path: '/register/:id/:name', component: register}

            
        ]
    });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //注册组件
            login,
            register,
            def
        },
        //注册路由对象
        router:route
    });

</script>


</body>
</html>

在这里插入图片描述

嵌套路由的使用

1.声明最外层路由和最内层路由
<template id="product">

    <div>

        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/del">商品删除</router-link>

        <router-view></router-view>

    </div>

</template>
创建路由对象含有嵌套路由

const router = new VueRouter({ routes:[ { path:'/product', //父组件的路径 component:product, //父组件 children:[ //子组件 {path:'add',component: add}, //子组件的路由路径 {path:'del',component: del}, ] }, ] });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由的使用</title>
</head>
<body>


<div id="app">


    <router-link to="/product">商品管理</router-link>
    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<template id="product">

    <div>

        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/del">商品删除</router-link>

        <router-view></router-view>

    </div>

</template>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

   //创建最外层组件
   const product = {
      template:'#product',
   };


   const add = {
       template:'<h4>商品添加</h4>'
   };

   const del = {
       template:'<h4>商品编辑</h4>'
   };




   //定义路由对象
   const router = new VueRouter({
       routes:[
           {
               path:'/product',
               component:product,
               children:[
                   {path:'add',component: add},
                   {path:'del',component: del},
               ]
           },
       ]
   });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        //注册路由对象
        router:router
    });

</script>


</body>
</html>

在这里插入图片描述

m0_47734729
关注
专栏目录
Vue路由传参的3种形式
从零出发
09-30 877
Vue路由传参的3种形式 在列表向详情页面跳转，而后在详情页面查看列表的详情信息，此时设计路由传参，vue中有3种传参形式，介绍如下： <div class="action-btn" @click="viewDetails(item.id)">查看详情</div> 一、path形式 methods：{ insurance(id) { //直接调用$rou...
Vue全家桶笔记07(黑马vue)--vue-router的基本使用，路由重定向，嵌套路由，动态匹配路由，props路由组件传递参数，命名路由的配置规则，vue-router编程式导航
weixin_43745804的博客
06-24 460
1、vue-router的基本使用 引入相关的库文件 添加路由连接 router-link是vue中提供的标签，默认会被渲染为a标签 to属性默认会被渲染为href属性 to属性的值默认会被渲染为#开头的hash地址 <div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> </
项目实训记录（十一）——Vue中路由嵌套和路由传参
pinkray_c的博客
06-06 650
本周要完成数据去重工作和前端的完善。清理工作 主要是来删除用户插入的重复数据。由管理员决定表是否允许重复数据。如果用户上传的表不允许，则在用户上传数据后调用去重方法；如果表允许重复，则不用调用。 另外，在管理员端添加管理表是否允许去重功能。可以进行编辑。编辑时，如果由不允许重复改为允许重复，则不变；如果由允许重复改为不允许重复，则调用数据去重方法。前端完善 增加一个欢迎界面。 增加提示信息。 增加上一步按钮。本次主要在增加欢迎界面时遇到了
Vue-05-router之嵌套路由以及其参数传递
[爪洼ing]的博客
06-08 206
关于路由router我们在04当中已经将其简单的使用讲解了，这里就再走深一步，嵌套路由以及其参数的传递！ 1.嵌套路由： 关于嵌套路由很简单，例如： 只需要再原路由的配置下，配置一个children！ 为什么不再定义一个路由而是非得在原路由下嵌套路由：在父组件下定义的路由配置，只有在父组件下，去访问才可以拿到 2.参数传递: 如下就是参数传递的方式 请求方式：1.path 2.name 携带参数方式：param：{key：value} 接收方式：1.开始props，直接从props获取 2.去配置r.
addRouters()不生效
最新发布
heromps的博客
06-25 292
执行完addRouters()后，我查看了store里的routes，已经有将动态路由添加进去，但是菜单中还是没有显示。修改后的permission.js。ddRouters()不生效。
router 路由嵌套以及普通参数传递问题
xcc_2269861428的博客
10-09 241
项目实际开发中肯定会出现一个菜单下有几个子菜单的情况，还有一个页面跳转到另外一个页面参数传递的问题，在vue中如何实现呢，通过children来实现路由嵌套，通过$route.query、$route.params实现参数的获取 简单的页面效果（实现了路由嵌套和参数获取问题） <!DOCTYPE html> <html lang="en"> <head&...
router 路由参数问题三种情况
zhaofeiweb的博客
12-21 1039
第一种：get方法 传递值 <router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link> 或 <router-link :to="{name:'test',query: { userId: 123,userName:'xia' }}">跳转</router-link> 接收值（页面刷新的时候不会消失） this.$route.que
2021-11-08 vue笔记-路由vue-router(二) 路由的重定向和二级路由(路由嵌套或子路由)
GAARA
11-08 264
文章目录 重定向:路径错误时回到指定的路径 使用: 二级路由 定义 示例一:Film路由下添加二级路由nowPlaying和comingSoon 1.views下新建文件夹FIlm,创建两个子路由文件 2.Film.vue中添加路由容器router-view 3.router/index.js的Film的路由路径下添加children数组 结果 示例二:为子路由重定向 目的 router.index.js
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
在实际开发中，还可以使用 Vue Router 的高级功能，比如嵌套路由、动态路由匹配、路由守卫等，以满足复杂的应用场景需求。 总的来说，Vue Router 是 Vue.js 应用不可或缺的一部分，它提供了强大的路由管理功能，让...
Vue笔记 基本路由 嵌套（多级）路由及实例代码
qiaoyangla的博客
04-08 2268
一、基本路由 1、基本使用 （1）安装vue-router,命令 npm i vue-router （2）应用插件：Vue.use(VueRouter) 在main.js文件中修改： import Vue from 'vue' import App from './App.vue' //引入插件 import VueRouter from 'vue-router' //引入路由器 import router from './router' Vue.config.pr
Vue3 学习笔记--Vue Router
qq_42530623的博客
08-13 996
路由
vue路由route的restful风格传参
weixin_43930256的博客
12-02 1198
vue路由route的restful风格传参
11-04-react路由基础
ange997的博客
10-30 158
路由 简介 react中，使用路由的是react-router react react.js 类似于vue.js web(BS构架的项目） react-navtive 简称RN 开发原生APP （android ios） react-router react-router ：是下面两种的基础，浏览器和原生app的通用部分 react-router-dom：用于浏览器端 react-router-navtive：用于原生app react-router-dom: 一些组件： 组件名必须大写 &l
vue笔记 (十三) vue-router (3):嵌套路由、路由参数传递与获取、$router和$route区别
weixin_43026567的博客
04-03 4071
嵌套路由 嵌套路由是一个很常见的功能，比如在 home 页面中，我们希望通过 /home/news 和 /home/message 访问一些内容。一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。 路径和组件的关系如下: 实现嵌套路由有两个步骤： 1.创建对应的子组件，并且在路由映射中配置对应的子路由 配置路由： 2.在组件内部使用<router-view>标签 显示效...
使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、RESTful 交互
热门推荐
IT小村
08-25 4万+
一、前言 前端三大 JS 框架 Vue、React、Angular 都用了一段时间了，最后还是回归于 Vue JS demo Vue [增删改查] 使用 Vue2.x + LayUI 做后台管理 CRUD 界面和 REST 交互 React [增删改查] 使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互 An...
vue-router 动态路由/xxx/:id-$route.params.id
caoxinjian423的博客
10-06 4740
router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue'; Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, {
vue中路由的使用-通过this.$route.params来获取路由中的参数
u011608672的博客
03-04 1万+
什么是路由 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； 在 vue 中使用 vue-router 导入 vue-router 组件类库： 使用 router
vue-router中 query传参和params传参的使用和区别
alokka的博客
11-20 2万+
1.query传参： 1.query传参 路由： var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } // name 或 pat...
vue中router-link的参数传递和接收
weixin_33873846的博客
11-08 1252
1 第一种方法:设置要传递的参数路由文件的配置: 此时不需要做任何的更改其他组件来获取传递的参数:在url上表现的显示:点击其中的详细信息第二种方法:设置要传递的参数此时路由文件需要简单的配置一下:注意:两处的ic名称一定要一样 ，和c#mvc中传递参数的形式一样 ，属于rest风格。点击其中的详细信息，进行跳转页面完整的demo案例:https://github.com/w...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值