Vue-Router路由学习

最新推荐文章于 2024-03-22 09:20:42 发布
最新推荐文章于 2024-03-22 09:20:42 发布
阅读量103 收藏
点赞数
分类专栏： Vue 文章标签： Vue router 路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39651356/article/details/105770465
版权

文章目录

//获取当前路由地址
this.$route.path

//编程式路由
this.$router.push("路由地址");

简单使用

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view> </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter1 = {
        template: "<h1>我是路由1 - 用户</h1>"
    }
    var componentRouter2 = {
        template: "<h1>我是路由2 - 注册</h1>"
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            // componet属性需要的是组件对象
            {path:"/user", component: componentRouter1},
            {path:"/register", component: componentRouter2}
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

路由重定向

<script>
     var myRouter = new VueRouter({
            routes: [
                //当用户访问/路径时，强制跳转到/user这个路由地址
                {path:"/", redirect:"/user"},
                {path:"/user", component: componentRouter1},
                {path:"/register", component: componentRouter2}
            ]
        })
</script>

 
 

嵌套路由

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter1 = {
        template: "<h1>我是路由1 - 用户</h1>"
    }

    var componentRouter2 = {
        template: `
            <div>
                <h1>我是路由2 - 注册</h1>
                <hr>
                <router-link to="/register/firstSon">子路由1</router-link>
                <router-link to="/register/secondSon">子路由2</router-link>
                <router-view></router-view>
            </div>
           `
    }

    var sonRouter1 = {
        template:"<h1>我是路由2下的子路由1内容</h1>"
    }
    var sonRouter2 = {
        template:"<h1>我是路由2下的子路由2内容</h1>"
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user"},
            {path:"/user", component: componentRouter1},
            {
                path:"/register",
                component: componentRouter2,
                children:[ {
                    path: "/register/firstSon",
                    component: sonRouter1
                },{
                    path: "/register/secondSon",
                    component: sonRouter2
                } ]
            }
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

动态路由

<javascript>
    // 伪代码
    routers: [
        ｛ path : "/user/1"  component: userComp },
        ｛ path : "/user/2"  component: userComp },
        ｛ path : "/user/3"  component: userComp },        
    ]
</javascropt>

 
 

<javascript>
    var vue = new Vue({
        routers:[{
            {path:"/iser/:id", component: userComp }
        }]
    })
</javascropt>

 
 

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件 - 获取动态路由的数据
    var componentRouter = {
        template: "<h1>我是路由1地址：user/{{$route.params.id}}</h1>"
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //动态路由
            {path:"/", redirect:"/user/1"},
            {path:"/user/:id", component: componentRouter},
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: "<h1>我是路由1地址：user/{{id}}</h1>",
        props: {
            id: {
                default: 0,
                type: String
            }
        }
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {path:"/user/:id", component: componentRouter, props: true},
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: "<h1>我是路由1地址：user/{{id}} -- 其他值{{name}}、{{age}}</h1>",
        props: ["id", "name", "age"]
    }


    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {
                path:"/user/:id",
                component: componentRouter,
                props: (route) => {

                    return {
                        name: 'lrc',
                        age: 20,
                        id: route.params.id
                    }

                }
            }
        ]
    })

    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

命名路由

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link :to="{name:'user', params:{id:1}}">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: "<h1>我是路由{{id}}地址：user/{{id}} -- 其他值{{name}}、{{age}}</h1>",
        props: ["id", "name", "age"]
    }


    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {
                path:"/user/:id",
                name: "user",
                component: componentRouter,
                props: (route) => {

                    return {
                        name: 'lrc',
                        age: 20,
                        id: route.params.id
                    }

                }
            }
        ]
    })

    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

编程式导航

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: `
            <div>
                <h1>我是路由{{id}}地址：user/{{id}} -- 其他值{{name}}、{{age}}</h1>
                <button v-on:click="jump">跳转到/user/2组件</button>
            </div>`,
        props: ["id", "name", "age"],
        methods: {
            jump : function() {
                this.$router.push("/user/2")
            }
        }
    }


    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {
                path:"/user/:id",
                name: "user",
                component: componentRouter,
                props: (route) => {

                    return {
                        id: route.params.id,
                        name: 'lrc',
                        age: 20
                    }

                }
            }
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter,

    })

</script>

 
 

路由前置守卫

 
 


  //to: 目的
  //form:从哪里来的
  //next() 放行
router.beforeEach((to,from,next)=>{

  var targetPath = to.path;
  if(targetPath=="/my"){
    next("/login");    // 跳转到其他路由路径
  }else{
    next(); //等价于放行
  }
})
嗯嗯**
关注
专栏目录
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
路由router的学习
weixin_46037781的博客
07-01 153
路由跳转方法push和replace push() replace()==========就不可以通过浏览器的<按钮回到上一页
vue-router 路由超详细教程
weixin_47124112的博客
09-06 4万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue-router路由懒加载
longgege001的博客
10-11 1万+
vue-router路由懒加载实践，vue-router路由实现原理简单说明
vue3:vue-router路由的使用
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 4042
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
最新发布
景天科技苑
03-22 4284
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
Vue3的vue-router路由详解
月影WEB的博客
05-16 3万+
这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。 Vue3的vue-router路由详解： 首先安装路由依赖模块： npm install vue-router@4 所需代码文件如下图： 图1 所需要的主要文件：index.html、index.js、App.vue index.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。 代码如下：..
vue-router路由缓存
二七二十七的博客
07-27 2601
路由缓存通过``标签中的include属性实现，指定include属性的属性值为需要进行缓存的组件名
vue-router动态路由实践
Bennett_G博客
01-09 2万+
vue动态路由 vuex 路由数据(demo) 贡献本人于服务端约定的路由数据结构，仅供参考
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
this.$refs类型识别问题 - 最详细解决方案 -【vue+typescript】
weixin_39651356的博客
10-11 6836
typescript是强类型所致 - typescript不能识别出this.$refs.xx是否含有xx2方法     方法1 - 任何类型 - 不推荐 - 一劳永逸 let myRef: any = this.$refs.myModal; myRef.resetFields(); //清空表单校验   方法2 - HTMLFormElement - 推荐 - 一劳永逸 //成员变量 $refs!: { myModal: HTMLFormElement //写法1 - 推荐 .
Vue学习4 - 自定义指令、回调函数、箭头函数
weixin_39651356的博客
04-26 1812
文章目录1. 自定义指令2. 过滤器3. 回调函数中是普通函数、箭头函数this指向问题 1. 自定义指令 自定义指令时需要使用到钩子函数进行定义指令 钩子函数bind：只调用一次，进行初始化操作inserted：被绑定元素父节点插入时的调用updatecomponentUpdatedunbind：只调用一次，指令与元素解绑时 钩子函数的参数el：被绑的元素对象binding：被绑指令所传的值...
ES6模块语法标准 - 模块化、导入、暴露
weixin_39651356的博客
04-26 1226
文章目录1. 概述2. ES6模块化规范2.1 暴露某个模块的成员变量、方法(默认、自定义)2.2 运行某个模块的内容 - 不需暴露方法3. 导入 - import只有js文件才可以简写后缀名 1. 概述 传统开发问题命名冲突文件依赖 模块化进行开发，解决上面两大问题 模块化：单独的功能封装成一个模块文件，模块之间的变量相互隔离，通过特定的接口进行模块间的组装 模块化优势代码重用方便维护 ...
Vue：项目-动态路由以及坑（完整代码）
weixin_39651356的博客
10-04 995
vue动态路由、完整代码、坑
Vue-Router路由基础教程：简单案例解析
"vue-router路由简单案例介绍 - 一个关于vue-router使用详解的文章，分享了基本用法和组件渲染。" 在Vue.js应用中，vue-router是官方推荐的路由管理库，它使得页面间的导航和状态管理变得简单。这篇文章主要讲解了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值