vue-路由基础

头像
Besmall
    阅读 8 分钟
    1

    路由基础

    1、开始

    什么是路由
    路由就是将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们
    定义（路由）组件。
    const Foo = { template: '<div>foo</div>' }
    定义路由
    const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
    创建 router 实例，然后传 routes 配置
    const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
    创建和挂载根实例。
    var app = new Vue({
        el:"#app",
        router
    });
    【案例】
    首先我们要引用一下两个js文件
    <script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
    效果图

    图片描述

    <div id="app">
    <router-view></router-view>
</div>
<script>
    var Foo = {
        template:"<div>第一个路由功能1</div>"
    }
    var Bar = {
        template:"<div>第一个路由功能2</div>"
    }
    var routes = [
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar}
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>
    这样我们很难操作，下面我们可以用按钮来操作
    效果

    图片描述

    【案例】
    <div id="app">
    <p>
        <router-link to="/foo">FOO页面</router-link>
        <router-link to="/bar">BAR页面</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    var Foo = {
        template:"<div>第一个路由功能1</div>"
    }
    var Bar = {
        template:"<div>第一个路由功能2</div>"
    }
    var routes = [
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar}
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    2、动态路由匹配和嵌套路由

    2.1、动态路由

    不同的用户展示不同的用户名
    效果

    图片描述

    <div id="app">
    <p>
        <router-link to="/userinfo">个人中心</router-link>
        
    </p>
    <router-view></router-view>
</div>
<template id="userinfo">
    <div>
        <h2>我是个人中心</h2>
        {{$route.params.username}}
    </div>
    
</template>
<script>
    var routes = [
        {path:"/userinfo" , 
            component:{
                template:"#userinfo"
            },
            children:[
                {path:":username"}
            ]
        }
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    2.2、嵌套路由

    效果

    图片描述

    <div id="app">
    <p>
        
        <router-link to="/userinfo">个人中心</router-link>
        
    </p>
    <router-view></router-view>
</div>
<template id="userinfo">
    <div>
        <h2>我是个人中心</h2>
        {{$route.params.username}}
        <router-view></router-view>
    </div>
    
</template>

<template id="userbase">
        <div>
            姓名
            性别
            年龄
        </div>
        
    </template>
<script>
    
    
    var routes = [
        
        {path:"/userinfo" , 
            component:{
                template:"#userinfo"
            },
            children:[
                {path:"base",
                    component:{
                        template:"#userbase"
                    }
                },
                {path:":username"}
            ]
        }
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    3、编程式导航

    想要导航到不同的 URL，则使用 router.push 方法
    编程式导航有4中写法
    我们看前2中字符串写法和对象写法
    效果

    图片描述

    <div id="app">
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/foo">导航</router-link>
        <router-link to="/bar">关于</router-link>
        <button @click="gofoo">foo</button>
    </p>
    <router-view></router-view>
</div>

<script>
    var Home = {
        template:"<div>我是首页</div>"
    }
    var Foo = {
        template:"<div>我是导航</div>"
    }
    var Bar = {
        template:"<div>我是关于</div>"
    }
    
    var routes = [
        {path:"/" , component:Home},
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar},
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        methods:{
            gofoo:function(){
                // 字符串
                //router.push('foo')
                // 对象
                router.push({ path: 'foo' })

            }
        },
        router
    });
</script>

    4、命名路由

    什么是命名路由
    就是在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称，这就是命名路由
    我们给首页做一个命名路由
    效果

    图片描述

    <div id="app">
    <p>
        <router-link :to="{name:'kong'}">首页</router-link>
        <router-link to="/foo">导航</router-link>
        <router-link to="/bar">关于</router-link>
    </p>
    <router-view></router-view>
</div>

<script>
    var Home = {
        template:"<div>我是首页</div>"
    }
    var Foo = {
        template:"<div>我是导航</div>"
    }
    var Bar = {
        template:"<div>我是关于</div>"
    }
    var routes = [
        {name:"kong",path:"/" , component:Home},
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar}
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    5、命名视图

    我们有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了
    效果

    图片描述

    <div id="app">
    <p>
        <router-link :to="{name:'kong'}">首页</router-link>
        <router-link to="/bar">关于</router-link>
    </p>
    <div>
        <h1>我是导航页面</h1>
        <router-view name="a"></router-view>
    </div>
    <div>
        <h1>我是主体页面</h1>
        <router-view name="b"></router-view>
    </div>
    
</div>

<script>
    var Home = {
        template:"<div>我是首页</div>"
    }
    var Foo = {
        template:"<div>内容</div>"
    }
    
    var Bar = {
        template:"<div>我是关于</div>"
    }
    var routes = [
        {name:"kong",path:"/" , components:{a:Home,b:Foo}},
        {path:"/bar" , component:Bar}
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    6、重定向和别名

    6.1、重定向

    重定向我们用redirect: ''
    当我输入cdx的时候给我跳转到foo导航页
    效果

    图片描述

    <div id="app">
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/foo">导航</router-link>
        <router-link to="/bar">关于</router-link>
    </p>
    <router-view></router-view>
</div>

<script>
    var Home = {
        template:"<div>我是首页</div>"
    }
    var Foo = {
        template:"<div>我是导航</div>"
    }
    var Bar = {
        template:"<div>我是关于</div>"
    }
    var routes = [
        {path:"/" , component:Home},
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar},
        {path:"/cdx" , redirect:"/foo"}
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    6.2、别名

    别名我们用alias: ''
    当我们输入别名shouye的时候，我们跳到首页页面
    效果

    图片描述

     <div id="app">
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/foo">导航</router-link>
        <router-link to="/bar">关于</router-link>
    </p>
    <router-view></router-view>
</div>

<script>
    var Home = {
        template:"<div>我是首页</div>"
    }
    var Foo = {
        template:"<div>我是导航</div>"
    }
    var Bar = {
        template:"<div>我是关于</div>"
    }
    var routes = [
        {path:"/" , component:Home,alias: '/shouye'},
        {path:"/foo" , component:Foo},
        {path:"/bar" , component:Bar},
        {path:"/cdx" , redirect:"/foo"}
    ]
    var router = new VueRouter({
        routes
    })
    var app = new Vue({
        el:"#app",
        router
    });
</script>

    7、HTML5hisTory模式

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
    const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
    该文章如果帮到你请麻烦帮忙点赞加收藏
    vue.js
    Besmall
    334 声望37 粉丝
    « 上一篇
    vue-混合和自定义指令与插件
    下一篇 »
    vue-路由高级

    引用和评论

    推荐阅读
    头像
    PHP常用函数篇

    Besmall赞 4阅读 2.9k评论 1

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新