vue2.0 路由 学习笔记

最新推荐文章于 2024-02-27 13:25:27 发布
最新推荐文章于 2024-02-27 13:25:27 发布
阅读量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
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解vue2.0路由如何配置问题
08-29
本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2.0源码学习资源
10-29
vue2.0源码学习资源，深入分析vue设计原理，ast对象，编译原理，观察者模式，双向绑定及相关的实例等
vue2路由配置
weixin_51390548的博客
03-03 1829
vue2路由配置
vue 路由参数跳转
周家大小姐
02-17 396
router.js const routers = [ { path:'*', redirect:'/AddBlog' }, { path:'/showBlogs', name:'showBlogs', component:()=&gt;import('@/components/ShowBlogs...
vue3设置路由path:‘*‘报错解决方法
最新发布
weixin_45534301的博客
02-27 530
vue3设置路由path: '*'报错解决方法
vue路由
ly410726的专栏
03-13 165
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-router4 path: ‘*‘ 写法
码农老牛
04-25 847
vue-router3升级。
vue2.0--:vue2.0路由的简单搭建
05-11
vue-vuerouter-demo
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
12-29
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。 <h1>{{ message }} <button @click=...
详解Vue 2.0封装axios笔记
08-30
本篇文章主要介绍了详解Vue 2.0封装axios笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue Router 通配符路径不好解决的问题处理
qiaokeli826的专栏
07-15 2626
在绝大多数情况下，我们都会在vue-router的路由表下面注册一个通配符路由以便所有不能识别的路由都往这个component里面跳转。 import VueRouter from 'vue-router'; const router = new VueRouter({ mode: 'history', routes: [ ...menus, { path:'*', component:Page404
vue路由配置：
A13330069275的博客
07-11 214
https://router.vuejs.org/vue路由配置： 1.安装  npm install vue-router  --save   / cnpm install vue-router  --save 2、引入并 Vue.use(VueRouter)   (main.js)  import VueRouter from 'vue-router' Vue.use(VueRouter)...
vue 路由的通配符 * 的使用 和 路由重定向 redirect
qq_44917015的博客
05-07 4324
{ // 通配符 // path:'/ycy*', path:'*', component: () => import(/* webpackChunkName: "ycyname" */'../views/page404.vue') , } 使用通配符* => 当路由为非法的时候 就加载相应的组件 path:'/ycy-*', => 当匹配到路由路径为 /ycy- 的时候 加载相应的组件 当遇到相同的路径时 path相同 原则是 谁先匹配先加载
vue 数字变星号 过滤器_Invalid path "*"，vue-router4 移除星号全匹配
weixin_29335033的博客
02-22 1565
vue-router4版本中，移除了path:'*'的匹配，再使用旧版的星号时，控制台就会报错按照官方的文档最后的升级说明，把*号修改下，改成“/:pathMatch(.*)*”。//pathMatchisthenameoftheparam,e.g.,goingto/not/foundyields//{params:{pathMatch:['not','foun...
Vue2 动态路由的使用
前端开发小白9527
04-18 8105
1 什么是动态路由: 工作中经常用到的情况就是，在导航菜单中,如果没有登录，我们则只展示一部分信息，如果登录，再将其余的信息展示，这就是动态路由，此时我们不需要在手动配置路由，后端将路由数据返回，我们拿到数据，进行匹配。 2 效果图: 登录前： 登录后： 3 完整代码部分： (1)这里直接在根组件测试 app.vue 文件 <template> <div id="app"> <div class="nav"> &l
Vue 路由router的介绍以及使用方法
weixin_41987908的博客
11-15 1354
路由router的介绍以及使用方法
Vue中如果不是已经配置好的路由（错误的路由），跳转到指定路径——redirect
zyz00000000的博客
03-23 1902
在router.js中配置：当输入没哟配置的路径时，直接跳转到home路径对应页面，且路径也是home路径 { path: '*',//除了已经配置好路由 redirect: '/home' } redirect也可以为一个函数： （1）接收一个参数为to to的值： 举例： { path: '*',//除了已经配...
尚硅谷vue2.0 vue3.0笔记
10-19
其中Vue2.0的笔记包括Vue2.0的响应式、组件化开发、路由、Vuex、axios等内容；而Vue3.0的笔记则包括Vue3.0的响应式、Composition API、新的生命周期钩子、自定义hook函数等内容。此外，他们还提供了使用vue-cli和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值