了解

为什么要用vue Router

　　浏览器路径中输入URL会找到WEB目录下对应的文件，进行解析-加载-再进行dom的渲染，传统的开发通常是多个页面，点击一个模块跳转一个页面，每次打开页面都要进行一个步骤：清空页面的dom-再从新加载另一个页面-渲染出页面，这样的步骤极为繁琐，并且在多人访问的时候，服务器会有压力。
　　Vue Router是一个SPA(single pageapplication)单页面应用程序，在完成一个应用或站点时，只有一个html页面，而这一个页面有一个容器，可以把需要加载的代码插入到容器中进行显示，这样就很好的解决了上述所说的问题。

工作原理

如：https:www.xxx.com/index.htm#/login
页面会根据url后#号后的路由地址/login，去路由配置中查找和/login对应的模块页面地址，发起异步请求加载该页面地址，最后把请求来的数据加载到容器里显示。

简单示例

1、创建两个组件component

//登录界面
var testLogin = Vue.component("login", {
    template: "<div>" +
    "登录界面<br>" +
    "用户名：<input type='text'>" +
    "密码：<input type='password'>" +
    "</div>"
});
//注册界面
var testRegister = Vue.component("register", {
    template: "<div>" +
    "注册界面<br>" +
    "用户名：<input type='text' placeholder='用户名'>" +
    "密码：<input type='password' placeholder='密码'>" +
    "<div>"
});

2、Router的配置

//router配置
const router = new VueRouter({
//注意这里是routes不是router哦！
routes: [
{path: "", component: testLogin},//path为空，则跳转默认页面
{path: "/login", component: testLogin},
{path: "/register", component: testRegister}
]
});

3、把router配置传入viewModel

//viewModel
var vm = new Vue({
el: "#app",
router: router//传入配置
})

模块跳转

1、指定标签

<!-- /login==路由地址 -->
<router-link to="/login">登录</router-link>

在网页会解析成：

<a href="#/login" class="">登录</a>

2、js固定语法$router.push

this.$router.push("/路由地址");

路由传参和取参

1、路径传参方式

1、传参

<div id="app">
    <router-link to="'/路由地址/值1/值2'">传</router-link>
</div>

2、取参

默认方式为params，所以取参使用params

this.$route.params.val1;

3、配置路由路径

    routes: [
    { path: "/路径名/:val1/:val2", component: testLogin }
    ]

2、params

1、模板内的写法

<div id="app">
    <router-link :to="{name:'模块名',params:{属性:值,属性:值}}"></router-link>
</div>

2、js写法

this.$router.push({
    name:"模块名",
    params:{
        属性:值,
        属性:值
    }
});

3、取参

this.$route.params;

3、query

1、模板内的写法

<div id="app">
    <router-link :to="{path:'路由地址',query:{属性:值,属性:值}}"></router-link>
</div>

2、js写法

this.$router.push({
    path:"路径名",
    query:{
        属性:值,
        属性:值
    }
});

3、取参

this.$route.query;

params和query的区别

params：通过name识别，传参后url不会显示参数，并且会在页面刷新后清空数据
query：通过path识别，但我使用name也可以识别（才学疏浅，有待研究），传参后url会显示参数，刷新不会清空数据

完整demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue Router</title>
</head>

<body>
    <div id="app">
        <!-- 指定标签 -->
        <router-view></router-view>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        //登录界面
        var testLogin = Vue.component("login", {
            data: function () {
                return {
                    user: {
                        uname: "username",
                        upwd: "password"
                    }
                }
            },
            template:
                `<div>
              <h3>登录界面</h3>
              用户名：<input type='text' v-model='user.uname'><br>
              密码：<input type='password' v-model='user.upwd'><br>
              <router-link :to="'/main2/'+user.uname+'/'+user.upwd">普通路径传参</router-link>
              <router-link v-bind:to="{path:'/main',query:{uname:user.uname,upwd:user.upwd}}">query传参</router-link>
              <router-link v-bind:to="{name:'testMain',params:{uname:user.uname,upwd:user.upwd}}">params传参</router-link>
             <button @click="login">js语法传参</button>
             <!-- 路径传参 -->

            </div>`
            ,
            methods: {
                login: function () {
                    this.$router.push({
                        path: "/main",
                        query: {
                            uname: this.user.uname,
                            upwd: this.user.upwd
                        }
                    })
                }
            }
        });
        //用户主体界面 演示query和params传参方式
        var testMain = Vue.component("main", {
            data: function () {
                return {
                    user: {
                        uname: "",
                        upwd: ""
                    }
                }
            },
            template: `
          <div>
              <h3>用户信息</h3>
              用户名为：{{user.uname}}<br>
              密码为：{{user.upwd}}<br>
              <router-link to="/login">返回</router-link>
          </div>
        `,
            mounted: function () {
                console.log(this.$route.params.uname);
                if (JSON.stringify(this.$route.query) == "{}") {
                    this.user = this.$route.params;
                } else {
                    this.user = this.$route.query;
                }
            }
        });

        //用户主体界面 演示普通的路径传参方式
        var testMain2 = Vue.component("main2", {
            data() {
                return {
                    user: {
                        uname: "",
                        upwd: ""
                    }
                }
            },
            template: `
                <div>
                    <h3>用户信息</h3>
                    用户名为：{{user.uname}}<br>
                    密码为：{{user.upwd}}<br>
                    <router-link to="/login">返回</router-link>
                </div>
            `,
            mounted() {
                console.log(this.$route.params);
                this.user = this.$route.params;
            }
        })

        //router配置
        const router = new VueRouter({
            //注意这里是routes不是router
            routes: [
                { path: "", component: testLogin },//path为空，则跳转默认页面
                { path: "/login", component: testLogin },
                { path: "/main", name: "testMain", component: testMain },
                { path: "/main2/:uname/:upwd", component: testMain2 }
            ]
        });
        //viewModel
        var vm = new Vue({
            el: "#app",
            router: router
        })
    </script>
</body>

</html>
© 允许规范转载