自學Vue的第05天：路由

時間 2019-12-06

原文原文鏈接

自學Vue的第05天：路由

路由跳轉原理之哈希模式

監聽hashchange事件，url的hash是否改變
核心是錨點值的改變，若是咱們監聽到錨點值改變了，就去局部改變頁面數據，不作跳轉。
與傳統的URL改變後當即發起請求，響應整個頁面，渲染整個頁面比，路由跳轉用戶體驗更好。javascript

<a href="#/login">登錄</a><br/>
<a href="#/register">註冊</a>

<div id="app">
</div>
<script type="text/javascript"> var appDiv = document.getElementById('app'); window.addEventListener('hashchange', function (e) { console.log(location.hash); }) </script>
</body>
複製代碼

咱們點擊登錄或註冊連接的時候，url的hash值被改變，而後被監聽到。html

咱們能夠根據監聽到的結果值不一樣，進行不一樣的頁面渲染vue

<script type="text/javascript"> var appDiv = document.getElementById('app'); window.addEventListener('hashchange', function (e) { console.log(location.hash); switch (location.hash) { case '#/login': appDiv.innerHTML = '我是登錄頁面'; break; case '#/register': appDiv.innerHTML = '我是註冊頁面'; break } }) </script>
複製代碼

效果

vue-router的安裝與使用

<a href="#/login">登錄</a><br/>
<a href="#/register">註冊</a>

<div id="app">
</div>
<script type="text/javascript"> var Login = { template: `<div>我是登錄頁面</div>` } var Register = { template: `<div>我是註冊頁面</div>` } <!--第一步 安裝路由插件--> Vue.use(VueRouter) //第二步 建立路由對象 var router = new VueRouter({ // 第三步 配置路由規則 routes: [ {path: '/login', name: 'login', component: Login}, {path: '/register', name: 'register', component: Register} ] }) new Vue({ el: '#app', router: router, template: `<div> <router-view></router-view> </div>`, data() { return {} } }) </script>
複製代碼

很是簡單java

其實就是根據當前錨點的不一樣，加載不一樣的Vue組件vue-router

路由跳轉

標籤跳轉：router-link

效果和上一節是同樣的，至關於改變了當前頁面的錨點app

js控制跳轉

gologin(){
    // this.$router.push({path: '/login'})
    //replace沒辦法返回上一頁
    this.$router.replace({path: '/login'})
}
複製代碼

路由的傳參與取參

路由跳轉的時候，參數傳遞是很經常使用的功能學習

傳值

var Login = {
        template: `<div>我是登錄頁面</div>`
    }

    var Register = {
        template: `<div>我是註冊頁面</div>`
    }

    <!--第一步 安裝路由插件-->
    Vue.use(VueRouter)
    //第二步 建立路由對象
    var router = new VueRouter({
        //    第三步 配置路由規則
        routes: [
            {path: '/login', name: 'login', component: Login},
            {path: '/register/:foo', name: 'register', component: Register}
        ]
    })

    new Vue({
        el: '#app',
        router: router,
        template: `<div>
                    <router-link :to="{name:'login',query:{id:'123'}}">去登錄</router-link><br/>
                    <router-link :to="{name:'register',params:{foo:'bar'}}">去註冊</router-link><br/>
                    <router-view></router-view>
                   </div>`,
        data() {
            return {}
        }
    })
</script>
複製代碼

query參數是經過url後的鍵值對傳遞參數的#/login?id=123ui

params參數是拼接在url的path中的#/register/barthis

取值

props傳參與取參

這種方式參傳遞與獲取params參數的時候更方便url

js傳參

目前咱們都是經過配置:to屬性進行參數傳遞的，

在經過js進行頁面跳轉的時候，也能夠帶上參數

完整代碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue學習</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>

<body>

<div id="app">
</div>
<script type="text/javascript"> var Login = { template: `<div>我是登錄頁面<span>獲取到參數：{{msg}}</span></div>`, data() { return { msg: '' } }, created() { this.msg = this.$route.query.id; } } var Register = { template: `<div>我是註冊頁面<span>獲取到參數：{{foo}}</span></div>`, props: ['foo'] } <!--第一步 安裝路由插件--> Vue.use(VueRouter) //第二步 建立路由對象 var router = new VueRouter({ // 第三步 配置路由規則 routes: [ {path: '/login', name: 'login', component: Login}, {path: '/register/:foo', name: 'register',props:true, component: Register} ] }) new Vue({ el: '#app', router: router, template: `<div> <button @click="tologin">去登錄</button> <button @click="toregister">去註冊</button> <router-view></router-view> </div>`, data() { return {} }, methods:{ tologin(){ this.$router.push({name:'login',query:{id:'123'}}); }, toregister(){ this.$router.push({name:'register',params:{foo:'bar'}}); } } }) </script>
</body>

</html>
複製代碼

一個小問題

咱們在兩處使用js進行跳轉，或者用標籤跳轉，也是同樣的，都會存在傳遞的參數確實改變了，可是頁面並無變化的問題

這是由於兩次跳轉的錨點並無變化，因此頁面會從新加載。改變url參數不會改變錨點

那麼怎麼辦呢？

<router-view :key="$route.fullPath"></router-view>

完整代碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue學習</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>

<body>

<div id="app">
</div>
<script type="text/javascript"> var Login = { template: `<div>我是登錄頁面<span>獲取到參數：{{msg}}</span></div>`, data() { return { msg: '' } }, created() { this.msg = this.$route.query.id; } } var Register = { template: `<div>我是註冊頁面<span>獲取到參數：{{foo}}</span></div>`, props: ['foo'] } <!--第一步 安裝路由插件--> Vue.use(VueRouter) //第二步 建立路由對象 var router = new VueRouter({ // 第三步 配置路由規則 routes: [ {path: '/login', name: 'login', component: Login}, {path: '/register/:foo', name: 'register',props:true, component: Register} ] }) new Vue({ el: '#app', router: router, template: `<div> <button @click="tologin">去登錄1</button> <button @click="tologin2">去登錄2</button> <button @click="toregister">去註冊</button> <router-view :key="$route.fullPath"></router-view> </div>`, data() { return {} }, methods:{ tologin(){ this.$router.push({name:'login',query:{id:'123'}}); }, tologin2(){ this.$router.push({name:'login',query:{id:'456'}}); }, toregister(){ this.$router.push({name:'register',params:{foo:'bar'}}); } } }) </script>
</body>

</html>
複製代碼

嵌套路由

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue學習</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>

<body>

<div id="app">
</div>
<script type="text/javascript"> var Nav = { template: ` <div> <router-view></router-view> <router-link :to="{name:'nav.index'}">首頁</router-link> | <router-link :to="{name:'nav.pensonal'}">我的中心</router-link> | <router-link :to="{name:'nav.message'}">資訊</router-link> | <router-link :to="{name:'nav.mine'}">個人</router-link> </div> `, } var Index = { template: ` <div>首頁</div> `, } var Pensonal = { template: ` <div>我的中心</div> `, } var Message = { template: ` <div>資訊</div> `, } var Mine = { template: ` <div>個人</div> `, } //安裝路由插件 Vue.use(VueRouter); //建立路由對象 var router = new VueRouter({ //配置路由對象 routes: [ { path: '', redirect: '/nav' }, { path: '/nav', name: 'nav', component: Nav, //嵌套路由增長這個屬性 children: [ //配置咱們的嵌套路由 {path: '', redirect: '/nav/index'}, {path: 'index', name: 'nav.index', component: Index}, {path: 'pensonal', name: 'nav.pensonal', component: Pensonal}, {path: 'message', name: 'nav.message', component: Message}, {path: 'mine', name: 'nav.mine', component: Mine}, ] } ] }) new Vue({ el: '#app', router, template: ` <div> <router-view></router-view> </div> `, data() { return {} }, methods: {} }) </script>
</body>

</html>
複製代碼