路由vue-router

2019-07-03 本文已影响0人北街九条狗

什么是路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

1.导入 vue-router 组件类库：

<!-- 1. 导入 vue-router 组件类库 -->
<script src="./vue-router-2.7.0.js"></script>

2.使用 router-link 组件来导航

<!-- 2. 使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

3.使用 router-view 组件来显示匹配到的组件

<!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>

4.注册组件

// 4.1 使用 Vue.extend 来创建登录组件
const login = {
     template: '<h1>登录组件</h1>'
}

// 4.2 使用 Vue.extend 来创建注册组件

const register = {
     template: '<h1>注册组件</h1>'
}

5.指定路由规则

var router = new VueRouter({
        routes: [
            { path: '/login', component : login },
            { path: '/register', component : register }
        ]
});

6.启用路由规则

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router // 启用路由，相当于router : router
});

路由携带参数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 2.使用routerTo做跳转节点，to相当于a标签的href -->
        <router-link to="/login/1">登录</router-link>
        <router-link to="/reg/2">注册</router-link>
        <router-view></router-view>
    </div>
    <script src="./js/vue.js"></script>
    <!-- 1.引入router.js文件 -->
    <script src="./js/vue-router.js"></script>
    <script>
        var login={
            template:`<h1>登录</h1>`
        };
        var reg={
            template:`<h1>注册</h1>`
        }
        // 3.创建VueRouter对象--匹配路由规则
        const router = new VueRouter({
            routes:[
                {path:'/login/:id',component:login},
                {path:'/reg/:id',component:reg},
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            components: {
                login,
                reg
            },
            router
        })
    </script>
</body>
</html>

路由的嵌套

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 2.使用routerTo做跳转节点，to相当于a标签的href -->
        <!-- <account></account> -->
        <router-link to="/account">accout组件</router-link>
        <router-view></router-view>
    </div>
    <script src="./js/vue.js"></script>
    <!-- 1.引入router.js文件 -->
    <script src="./js/vue-router.js"></script>
    <script>
        var account = {
            template: `<div>
                            这是account组件
                            <router-link to="/account/login">登录</router-link>
                            <router-link to="/account/reg">注册</router-link>
                            <router-view></router-view>
                        </div>`
        }

        var login = {
            template: `<h1>登录</h1>`
        };
        var reg = {
            template: `<h1>注册</h1>`
        }
        // 3.创建VueRouter对象--匹配路由规则
        const router = new VueRouter({
            routes: [//redirect重定向
                {path:'/account',redirect:'/account/login'},
                {
                    path: '/account',
                    component: account,
                    children : [//子路由没有斜线
                        {path :'login',component:login},
                        {path :'reg',component:reg}
                    ]
                },

            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            components: {
                login,
                reg,
                account
            },
            router,
            watch: {
                '$route':function(newValue,oldValue){
                    if(newValue.path=='/account/login'){
                        console.log('lalal');
                    }
                }
            },
        })
    </script>
</body>

</html>

watch属性的使用

考虑一个问题：想要实现名和姓两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

监听data中属性的改变：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="mgs">
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                mgs:''
            },
            watch: {
              'mgs':function(newVale,oldVale){//第一个参数是新值，第二个参数是上一次结果
                  console.log(newVale+'---'+oldVale);
              }  
            },
        })
    </script>
</body>

</html>

computed计算属性的使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="a" >
        +
        <input type="text" v-model="b"  >
        =
        <span>{{final}}</span>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                a:'',
                b:''
            },
            computed: {//计算属性
                final(){
                    return this.a+this.b;
                },
                data
            },
        })
    </script>
</body>

</html>