vue2.0 路由 学习笔记

最新推荐文章于 2024-05-06 20:31:51 发布
最新推荐文章于 2024-05-06 20:31:51 发布
阅读量3k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scorpio_h/article/details/60885104
版权
vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1.  布局
<router-link to="/home">主页</router-link>
<router-view></router-view>

2. 路由具体写法，重定向{path:'*', redirect:'/home'}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .router-link-active{
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script>
        // 组件
        var Home={
            template:"<h3>我是主页</h3>"
        }
        var News={
            template:"<h3>我是新闻</h3>"
        }

        // 配置路由
        var routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'}
        ];

        // 生成路由实例
        var router=new VueRouter({
            routes:routes
        })

        // 把路由挂到vue上
        new Vue({
            el:"#box",
            router:router
        })
    </script>
</body>
</html>


------------------------------------------
路由嵌套:
/user/username


const routes=[
   {path:'/home', component:Home},
   {
       path:'/user',
       component:User,
       children:[  //核心
           {path:'username', component:UserDetail}
       ]
   },
   {path:'*', redirect:'/home'}  //404

];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .router-link-active{
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script>
        // 组件
        var Home={
            template:"<h3>我是主页</h3>"
        }
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li><router-link to="/user/username">某用户</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        }
        var UserDetail={
            template:'<div>我是某用户</div>'
        }

        // 配置路由
        var routes=[
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:'username',component:UserDetail}
                ]
            },
            {path:'*',redirect:'/home'}
        ];

        // 生成路由实例
        var router=new VueRouter({
            routes:routes
        })

        // 把路由挂到vue上
        new Vue({
            el:"#box",
            router:router
        })
    </script>
</body>
</html>

------------------------------------------

路由+参数：

/user/strive/age/10

:id
:username

:age

路由实例方法:
router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由，不会往历史记录里面添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .router-link-active{
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" name="" value="添加一个路由" @click="push">
        <input type="button" name="" value="替换一个路由" @click="replace">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script>
        // 组件
        var Home={
            template:"<h3>我是主页</h3>"
        }
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li>
                            <router-link to="/user/strive/age/10">
                                Strive
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/user/blue/age/40">
                                Blue
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/user/eric/age/70">
                                Eric
                            </router-link>
                        </li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        }
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        }

        // 配置路由
        var routes=[
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:':username/age/:age',
                        component:UserDetail
                    }
                ]
            },
            {path:'*',redirect:'/home'}
        ];

        // 生成路由实例
        var router=new VueRouter({
            routes:routes
        })

        // 把路由挂到vue上
        new Vue({
            router:router,
            methods:{
                push(){
                    router.push({path:'/home'})
                },
                replace(){
                    router.push({path:'/user'})
                }
            }
        }).$mount("#box")
    </script>
</body>
</html>

------------------------------------------

路由跳转配合 animate.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <style>
        .router-link-active{
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" name="" value="添加一个路由" @click="push">
        <input type="button" name="" value="替换一个路由" @click="replace">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <transition name="" mode="" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <router-view></router-view>
            </transition>
        </div>
    </div>
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script>
        // 组件
        var Home={
            template:"<h3>我是主页</h3>"
        }
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li>
                            <router-link to="/user/strive/age/10">
                                Strive
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/user/blue/age/40">
                                Blue
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/user/eric/age/70">
                                Eric
                            </router-link>
                        </li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        }
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        }

        // 配置路由
        var routes=[
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:':username/age/:age',
                        component:UserDetail
                    }
                ]
            },
            {path:'*',redirect:'/home'}
        ];

        // 生成路由实例
        var router=new VueRouter({
            routes:routes
        })

        // 把路由挂到vue上
        new Vue({
            router:router,
            methods:{
                push(){
                    router.push({path:'/home'})
                },
                replace(){
                    router.push({path:'/user'})
                }
            }
        }).$mount("#box")
    </script>
</body>
</html>


scorpio_h
关注
专栏目录
Vue 2.0中的路由实现及动态路由和内置属性与方法解析
toolsend的博客
07-12 1204
Vue 2.0提供了Vue Router插件来实现路由功能，并且支持动态路由和提供了一些内置属性和方法来方便路由操作。本篇博客将详细介绍Vue 2.0中的路由实现方式以及动态路由的概念，并探讨一些常用的路由内置属性和方法。(1) 导入Vue和Vue Router：在路由文件的开头，需要导入Vue和Vue Router相关的模块。(1) 在路由配置中定义动态路由：使用冒号(:)作为参数的占位符，定义需要动态生成的路由。(2) 导入和定义组件：根据项目需求，导入需要用于路由的组件，并定义路由的映射关系。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3185
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
vue2路由配置
weixin_51390548的博客
03-03 1923
vue2路由配置
Vue2.0创建路由
m0_59511468的博客
04-19 633
在main.js里将内容改成这样 添加好后在App.vue里将 <router-view></router-view> 打印上, 导入的Vue就会出现在这里 代码: import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import name from './components/name' Vue.use(VueRouter)...
vue-router2路由配置和调用
眼里长着太阳，笑里全是坦荡
07-21 730
vue-router是单页应用子页面的跳转机制，下面来说说vue-router的使用方法 1.安装路由 npm install -save-dev vue-router 2.路由配置  在main.js中引入vue和vue-router import Vue from 'vue'; vue.use(router); 3.将要跳转的路由添加到路由对象的子对象中，  router.js代码如...
Vue2.0教程 （五）Vue-router路由
燃燃的大尾巴
07-25 411
vue教授搭建
vue2.0学习笔记文件.zip
01-13
这份“vue2.0学习笔记文件.zip”包含了作者在学习Vue2.0过程中的笔记和相关项目文件，虽然缺少了某些特定的案例和依赖，但它仍能为我们提供宝贵的参考。 首先，`web.config`可能是用于Web应用程序配置的文件，通常...
vue2.0开发入门笔记之.vue文件的生成和使用
08-29
Vue.js 是一款流行的前端框架，尤其在 Vue 2.0 版本中，它引入了单文件组件（Single File Component, SFC）的概念，`.vue` 文件就是这种组件的载体。`.vue` 文件将 HTML、CSS 和 JavaScript 三者封装在一个文件内，...
VueBasicLearning:Vue 2.0学习笔记
03-16
以上只是Vue 2.0基础知识的一部分，实际开发中，你还需要学习更多高级特性和最佳实践，例如Vuex的状态管理、Vue CLI的使用、Vue Server Side Rendering等。持续学习和实践，你将成为Vue开发的专家。
vue学习笔记之vue1.0和vue2.0的区别介绍
08-30
- **vue-router和vuex**：这两个官方插件在Vue 2.0中得到了增强，提供更好的路由管理和状态管理方案。 总结来说，Vue 2.0 在保持易用性的同时，增强了性能、扩展性和灵活性，使得开发者能够构建更大规模、更复杂的...
v-router 路由基础
小hu同学
03-20 2114
导读：由于本篇文章我是在juejin上面发了后，复制过来的，所以会有一些动态图没有动，图片有水印，排版等问题 一、路由的基本概念与原理 1.什么是路由 路由（英文：router）就是对应关系。 2.SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 3.什么是前端路由 概念：Hash 地址与组.
vue2.0-路由
宇世无情的博客
02-26 1198
vue2.0路由的简单理解
Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫，两种工作模式)
最新发布
AZURE060606的博客
05-06 3313
需求：在同一个html页面中，左边有两个跳转链接负责切换组件，右边展示不同的组件，仅以切换路由为示例。路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作，确保用户已符合规定的方式访问路由。此时访问路由不会返回任何东西，并触发函数。其他与history基本没有区别。当添加token后便能正常访问。
手把手教你使用Vue2.0实现动态路由展示
你若为我繁华，我愿成你烟花
11-02 1308
这里我使用了setLeftMenu来进行缓存原始菜单数据，用于左侧渲染菜单。关键代码是使用router.addRoutes来动态添加路由信息。这里需要注意下有版本关系，如果不对应会有不同的问题。当用户登录成功后，请求菜单数据。在/router/index.js文件中。实现上方效果，则表示动态路由添加成功。当页面进入后，默认进入登录页面。当点击左侧菜单后，进行跳转路由。使用Vue2实现动态路由展示。
vue3设置路由path:‘*‘报错解决方法
热门推荐
做最有意义的事情，成就最有价值的梦想，展现最真实的自己 . 超越自己，改变世界 .
08-21 1万+
一般我们再设置404页面路由的时候是这样的: { path: "/404", name: "notFound", component: notFound }, { path: "*", // 此处需特别注意置于最底部 redirect: "/404" } 但是如果你使用的是vue3的话,你会遇到这样的一个报错: Catch all routes ("*") must now be defined using a param with a custom regexp. 这个报错翻译过来就是捕获所有路
vue-router4 path: ‘*‘ 写法
码农老牛
04-25 1008
vue-router3升级。
vue路由
ly410726的专栏
03-13 203
1.vue官网路由地址https://router.vuejs.org/ vue路由配置： npm install vue-router --save 或者cnpm install vue-router --save 2、引入并 Vue.use(VueRouter) (main.js) import VueRouter from 'vu...
vue 路由的通配符 * 的使用 和 路由重定向 redirect
qq_44917015的博客
05-07 4471
{ // 通配符 // path:'/ycy*', path:'*', component: () => import(/* webpackChunkName: "ycyname" */'../views/page404.vue') , } 使用通配符* => 当路由为非法的时候 就加载相应的组件 path:'/ycy-*', => 当匹配到路由路径为 /ycy- 的时候 加载相应的组件 当遇到相同的路径时 path相同 原则是 谁先匹配先加载
vue路由，路由传参（parmas,query）
田兴的博客
12-22 5235
一、Vue路由基础用法： 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由：引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由：引入并创建组件 import BYHome from './components/BYHome.vue' import BYNe...
Vue2.0学习笔记及项目配置解析
资源摘要信息:"本资源文件为学习Vue2.0的笔记压缩包，包含了一系列学习过程中的笔记和相关配置文件，适合想要了解和学习Vue2.0的开发者参考。文件中未包含实际的代码案例，如ToDoList项目案例，以及node_modules...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值