Vue 路由

时间 2020-04-03

原文原文链接

在单页应用中经常要用到路由。html

传统的页面跳转是浏览器请求新的页面，渲染整个新的页面。vue

单页应用是把要跳转的页面的以组件的形式集成在当前页面中，跳转时浏览器不用发起新请求，由于目标页面是当前页面的一部分，直接显示目标页面那一部分便可。vue-router

demo 在单页应用中使用路由

一、下载路由插件npm

npm install vue-router -S

install能够简写为i数组

咱们要使用的是里面的vue-router.js文件浏览器

二、写一个test.html安全

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script> 
        <!-- 引入路由插件。上线时均要换为xxx.min.js -->
        <script src="js/vue-router.js"></script>
    </head>
    <body>
        
    <div id="app"></div>
    
    <script>
        // 首页组件
        var Index={
            template:`
                <div>
                    <p>this is the index page</p>
                    <p><a href="#/login">login</a></p>  <!-- 注意url写法，#/开头 -->
                    <p><a href="#/register">register</a></p>
                </div>
            `
        }
        
        // 登陆组件
        var Login={
            template:`
                <div>
                    <p>this is the login page</p>
                    <p><a href="#/index">index</a></p>
                    <p><a href="#/register">register</a></p>
                </div>
            `
        }
        
        // 注册组件
        var Register={
            template:`
                <div>
                    <p>this is the register page</p>
                    <p><a href="#/index">index</a></p>
                    <p><a href="#/register">register</a></p>
                </div>
            `
        }
            
        // 安装路由插件
        Vue.use(VueRouter);
        
        // 建立路由对象
        var router=new VueRouter({
            // 配置路由规则
            routes:[  //对象数组
                {path:'/index',name:'index',component:Index}, //path指定映射地址，注意没有#，component指定对应的组件
                {path:'/login',name:'login',component:Login},
                {path:'/register',name:'register',component:Register},
            ]
        });
        
        new Vue({
            el:'#app',
            router,  //本来是router:router,能够简写
            template:`
                <div>
                    <!--路由页面只是当前页面的一部分，当前页面能够写一些其余内容，写的内容是全部路由页面-->
                    <p>this is common area</p>
                    <router-view></router-view>  <!--引入路由页面。路由到哪一个页面，就用对应的组件替换这部分-->
                </div>
            `
        })
    </script>        
        
    </body>
</html>

三、运行app

假设test.html的地址是：http://127.0.0.1:8848/vue/test.html#/ 注意后面有个#函数

则index的地址是：http://127.0.0.1:8848/vue/test.html#/indexpost

login的地址是：http://127.0.0.1:8848/vue/test.html#/login

register的地址是：http://127.0.0.1:8848/vue/test.html#/register

3个页面，但实际上路由的3个页面都在test.html中。

单页应用的两种路由模式

哈希模式（利用hashchange 事件监听 url的hash 的改变）

history模式（须要后台配合把接口都打到咱们打包后的.html文件上，好比上用test.html打包路由页面，test.html至关于一个容器）

demo中使用的是哈希模式

哈希模式实现路由跳转的原理

    // 监听地址栏url的改变，haschange是预约义事件
    window.addEventListener("hashchange",function(e){  //haschange事件发生时，会封装事件以参数的形式传给处理函数
        console.log(e);  //这个对象的部分信息： {..., oldURL: "http://127.0.0.1:8848/vue/test.html#/index", newURL: "http://127.0.0.1:8848/vue/test.html#/register", type: "hashchange", …}
        console.log(location.hash); //地址栏的url已改变，获取新的url的hash。带有#/，好比#/index，#/login
        // console.log(location); //location是不带#/的，好比index、login
        
        switch(location.hash){  //根据路由配置决定和哪些常量比较。这些常量就是路由配置中的path
            case '#/index':
                //...   //若是匹配就用对应的组件替换<router-view></router-view>部分
                break;
            case '#/login':
                break;
            case '#/register':
                break;
        }
    })

路由跳转的3种方式

<a>连接
<router-link>标签
$router对象

    new Vue({
        el:'#app',
        router,
        template:`
            <div>
                <p>
                    <a href="#/index">index</a>  <!-- 要带# -->
                    <router-link to="/login">login</router-link>  <!-- 不带# -->
                    <button @click="goRegister">register</button>
                </p>
                <router-view></router-view> 
            </div>
        `,
        methods:{ goRegister(){ this.$router.push({path:'/register'});  //不带#
 } }
    })

<router-link>、$router都是路由插件里的东西，都用路由了，那url中指定有#号，它本身会加#号，因此咱们写路径的时候不加#号。

<a>是html的标签，不知道url中有没有#号，因此须要咱们本身加上。

$router的经常使用方法

push() 跳转到指定的页面，会往history中插入一条新纪录
replace() 和push()的用法、做用相同，只是replace()不会往history中插入一条新纪录
go(-1) 跳转到history中的上一条记录，至关于点击浏览器的后退箭头。

$router还有个兄弟$route，和$router不一样，$route封装了路由信息，只有属性（能够理解为是只读的），经常使用的属性好比hash、path、query、params。

路由的传参和取参

一、<a>连接方式

    // 首页组件
    var Index={
        template:`
            <div>
                <p>this is the index page</p>
                <p>{{this.$route.query.username}}  {{this.$route.query.username}}</p>  <!-- 若是只在载入此组件时使用，直接取就好了 -->
                <p>{{username}} {{password}}</p>  <!-- 若是后续还要使用，须要保存到内存变量中 -->
            </div>
        `,
        data(){
            return{
                username:'',
                password:''
            }
        },
        created(){ //路由到此组件|页面时，会新建此组件的实例，在created()中获取传来的数据
            this.username=this.$route.query.username;  //$route,没有r，a连接只能用query来取
            this.password=this.$route.query.password; }
    }
        
    // 安装路由插件
    Vue.use(VueRouter);
    
    // 建立路由对象
    var router=new VueRouter({
        // 配置路由规则
        routes:[ 
            {path:'/index',name:'index',component:Index}, 
        ]
    });
    
    new Vue({
        el:'#app',
        router,
        template:`
            <div>
                <a href="#/index?username=chy&password=abcd">index</a>  <!-- 传递参数 -->
                <router-view></router-view> 
            </div>
        `
    })

参数以查询字符串的形式拼接在url中：http://127.0.0.1:8848/vue/test.html#/index?username=chy&password=abcd

二、<router-link>方式有2种

（1）query

　　 <!-- to前面有冒号,我这里使用的是路由配置里的name。query -->
　　 <router-link :to="{name:'index',query:{username:'chy',password:'abcd'}}">index</router-link>

查询字符串的形式拼接参数，获取时也是$route.query的方式，url中会带有参数：http://127.0.0.1:8848/vue/test.html#/index?username=chy&password=abcd

（2）params

<!--params，post方式-->
<router-link :to="{name:'index',params:{username:'chy',password:'abcd'}}">index</router-link>

要用$route.params来接收，用什么传递就用什么接收。

url中不显示参数，更安全：http://127.0.0.1:8848/vue/test.html#/index

params方式的路由配置还能够这样写：

    // 建立路由对象
    var router=new VueRouter({
        // 配置路由规则
        routes:[ 
            {path:'/index/:username',name:'index',component:Index},
        ]
    });

:参数名能够获取对应的参数值，http://127.0.0.1:8848/vue/test.html#/index/chy，url是RESTful风格

三、$router对象方式

    new Vue({
        el:'#app',
        router,
        template:`
            <div>
                <button @click="goIndex">index</button>
                <router-view></router-view> 
            </div>
        `,
        methods:{ goIndex(){ this.$router.push({name:'index',query:{username:'chy',password:'abcd'}}); } }
    })

说明

<router-link>、$router对象方式，均可以使用query或params来传递参数，均可以使用path或name来指定路由页面，

若是路由配置的path是： {path:'/index/:username',name:'index',component:Index} 这种随参数的变化而变化的，那就使用name。