自學Vue的第05天:路由

Koko君發表於2019-06-08

自學Vue的第05天:路由

路由跳轉原理之雜湊模式

監聽hashchange事件,url的hash是否改變
核心是錨點值的改變,如果我們監聽到錨點值改變了,就去區域性改變頁面資料,不做跳轉。
與傳統的URL改變後立即發起請求,響應整個頁面,渲染整個頁面比,路由跳轉使用者體驗更好。

<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>
複製程式碼

自學Vue的第05天:路由

我們點選登陸或註冊連結的時候,url的hash值被改變,然後被監聽到。

我們可以根據監聽到的結果值不同,進行不同的頁面渲染

<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的第05天:路由

vue-router的安裝與使用

自學Vue的第05天:路由

<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>
複製程式碼

非常簡單

其實就是根據當前錨點的不同,載入不同的Vue元件

路由跳轉

自學Vue的第05天:路由

標籤跳轉:router-link

自學Vue的第05天:路由

效果和上一節是一樣的,相當於改變了當前頁面的錨點

js控制跳轉

自學Vue的第05天:路由

自學Vue的第05天:路由

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

路由的傳參與取參

路由跳轉的時候,引數傳遞是很常用的功能

自學Vue的第05天:路由

傳值

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

params引數是拼接在url的path中的#/register/bar

取值

自學Vue的第05天:路由

props傳參與取參

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

自學Vue的第05天:路由

js傳參

目前我們都是通過配置:to屬性進行引數傳遞的,

在通過js進行頁面跳轉的時候,也可以帶上引數

自學Vue的第05天:路由

  • 完整程式碼
<!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>
複製程式碼

一個小問題

自學Vue的第05天:路由

我們在兩處使用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>
複製程式碼

路由守衛

自學Vue的第05天:路由

相關文章