vue-路由基础

路由基础

一、开始

什么是路由

路由就是将组件(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.一、动态路由

不一样的用户展现不一样的用户名

效果

<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.二、嵌套路由

效果

<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>

三、编程式导航

想要导航到不一样的 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>

四、命名路由

什么是命名路由

就是在建立 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>

五、命名视图

咱们有时候想同时（同级）展现多个视图，而不是嵌套展现，例如建立一个布局，有 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.一、重定向

重定向咱们用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.二、别名

别名咱们用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>

七、HTML5hisTory模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

该文章若是帮到你请麻烦帮忙点赞加收藏