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: [...]
})

該文章若是幫到你請麻煩幫忙點贊加收藏