自学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>
复制代码

自学Vue的第05天：路由

自学Vue的第05天：路由

路由跳转原理之哈希模式

vue-router的安装与使用

路由跳转

标签跳转：router-link

js控制跳转

路由的传参与取参

传值

取值

props传参与取参

js传参

一个小问题

嵌套路由

路由守卫