VueRouter的基本使用

作者: Angel_6c4e | 来源:发表于2020-08-05 23:05 被阅读0次

VueRouter的基本使用
VUE路由（1.router与route区别 2.路由跳转传参
VueRouter基本示例
使用 VueRouter 构建SPA单面应用DEMO
VueRouter路由使用
Vue2入门教程
router
vue2 & vue3 router keepalive 的使
Vue Router学习笔记（1）
Vue.js 3.0 项目投入使用

什么是Vue Router?
Vue Router和v-if/v-show一样，是用来切换组件的显示的
v-if/v-show是标记来切换(true/ false)
Vue Router用哈希来切换(#/xxx)
比v-if/v-show强大的是Vue Router不仅仅 能够切换组件的显示，还能够 在切换的时候传递参数
Vue Router使用

1.导入vue-router.js文件，必须插入到vue.js文件后面

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!--1.导入vue-router.js-->
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

2.定义路由规则

const one = {
    template:"#one"
}
const two = {
    template:"#two"
}
//2.定义路由规则
//路由重定向:{ path:’被重定向值’，redirect:’ 重定向之后的值’}
const routes = [
    { path: '/', redirect: '/one' },
    { path: '/one', component: one },
    { path: '/two', component: two }
];

创建 router 实例对象

const router = new VueRouter({
    //在实例对象中告诉要切换的规则
    routes:routes,
       //设置以后激活状态下的类名
    inkActiveClass:"router-active"
})

4.将创建好的路由对象绑定到Vue实例上

let vue = new Vue({
    el:"#app",
    data:{},
    //4.将创建好的路由对象绑定到Vue实例上
    router:router,
    methods:{},
    computed:{},
    components:{
        one:one,
        two:two
        }
})

5.修改URL哈希值
6.通过<router-view>渲染匹配的组件

<div id="app">
   <!-- 5.修改URL哈希值 -->
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
    <!-- 路由出口 -->
    <!-- 6.路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>

7.css样式

<style>
    .onepage{
        width: 500px;
        height: 500px;
        background: palegoldenrod;
    }
    .twopage{
        width: 500px;
        height: 500px;
        background: palegreen;
    }
    .router-active{
        background: paleturquoise;
    }
</style>

一.VueRouter中<router-link>和<router-view>的使用

<router-link>标签：Vue Router中提供专门用于设置哈希值的标签；
<router-view>标签：Vue Router中提供专门用于将路由匹配到的组件渲染到指定位置；

router-link特点
默认情况下Vue会将router-link渲染成a标签，但是我们可以通过tag来指定到底渲染成什么；

2.给router-link设置选中样式
默认情况下我们可以通过重写router-link -active类名来实现设置选中样式，但是我们也可以通过linkActiveClass来指定选中样式；

<div id="app">
    <router-link to="one" tag="button">切换到第一个界面</router-link>
    <router-link to="two" tag="button">切换到第二个界面</router-link>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

二.VueRouter中两种参数传递方式

挂载的路由对象this.$route.XXX中的:
query对象：保存的是通过URL传递的参数；
params对象：保存的是通过占位符传递的参数；

第一种传递参数的方式:通过URL 参数的方式传递
在指定HASH的时候，通过?key=value&key=value的方式传递;
在传递的组件的生命周期方法中通过this.$route.query的方式来获取;

<body>
        <div id="app">
             <!--
                    第一种传递参数的方式:通过URL 参数的方式传递
                    在指定HASH的时候，通过?key=value&key=value的方式传递
                    在传递的组件的生命周期方法中通过this.$route.query的方式来获取
            -->
            <router-link to="/one?name=yaxi&age=20" tag="button">切换的第一个界面</router-link>
            <router-link to="/two" tag="button">切换的第二个界面</router-link>
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
        <template id="one">
            <div class="onepage">
                <p>我是第一个界面</p>
            </div>
        </template>
        <template id="two">
            <div class="twopage">
                <p>我是第二个界面</p>
            </div>
        </template>
        <script type="text/javascript">
            const one = {
                template:"#one",
                //在one的生命周期函数中获取传递的参数
                created:function(){
                    console.log(this.$route);
                    console.log(this.$route.query);
                    console.log(this.$route.query.name);
                    console.log(this.$route.query.age);
                }
            }
            const two = {
                template:"#two",
                        }
            //2.建立路由规则
            const routes = [
                {path:"/",redirect:"/one"},
                {path:"/one",component:one},
                {path:"/two",component:two}
            ]
            //3.建立vuerouter 实例对象
            const router = new VueRouter({
                //在vuerouter实例对象中告诉路由切换规则
                routes:routes,
                //设置激活后的状态类名
                linkActiveClass:"router-active"
            })
            let vue = new Vue({
                el:"#app",
                data:{},
                //4.将创建好的路有对象绑定到Vue实例上
                router:router,
                methods:{},
                computed:{},
                components:{
                    one:one,
                    two:two
                }
            })
        </script>
    </body>

结果：

第二种传递参数的方式:通过路由规则中的占位符传递
在指定路由规则的时候通过/ :key/:key的方式来指定占位符;
在指定HASH的时候，通过/value/value的方式来传递值;
在传递的组件的生命周期方法中通过this. $route. params的方式来获取;

<body>
        <div id="app">
            <router-link to="/one" tag="button">切换的第一个界面</router-link>
             <!--
                    第二种传递参数的方式:通过路由规则中的占位符传递
                    在指定路由规则的时候通过/ :key/:key的方式来指定占位符
                    在指定HASH的时候，通过/value/value的方式来传递值
                    在传递的组件的生命周期方法中通过this. $route. params的方式来获取
                -->
            <router-link to="/two/yaxi/22" tag="button">切换的第二个界面</router-link>
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
        <template id="one">
            <div class="onepage">
                <p>我是第一个界面</p>
            </div>
        </template>
        <template id="two">
            <div class="twopage">
                <p>我是第二个界面</p>
            </div>
        </template>
        <script type="text/javascript">
            const one = {
                template:"#one",
            }
            const two = {
                template:"#two",
               //在two的生命周期函数中获取传递的参数
                created:function(){
                    console.log(this.$route);
                    console.log(this.$route.params);
                    console.log(this.$route.params.name);
                    console.log(this.$route.params.age);
                }
            }
            //2.建立路由规则
            const routes = [
                {path:"/",redirect:"/one"},
                {path:"/one",component:one},
                {path:"/two/:name/:age",component:two}
            ]
            //3.建立vuerouter 实例对象
            const router = new VueRouter({
                //在vuerouter实例对象中告诉路由切换规则
                routes:routes,
                //设置激活后的状态类名
                linkActiveClass:"router-active"
            })
            let vue = new Vue({
                el:"#app",
                data:{},
                //4.将创建好的路有对象绑定到Vue实例上
                router:router,
                methods:{},
                computed:{},
                components:{
                    one:one,
                    two:two
                }
            })
        </script>
    </body>

结果：

三.VueRouter中的嵌套路由

什么是嵌套路由?
嵌套路由也称之为子路由，就是在被切换的组件中又切换其它子组件

案例:在one界面中又有两个按钮，通过这两个按钮进一步切换one中的内容

   <body>
       <div id="app">
           <router-link to="/one" tag="button">切换到第一个界面</router-link>
           <router-link to="/two" tag="button">切换到第二个界面</router-link>
           
           <router-view></router-view>
       </div>
       <template id="one">
           <div class="onepage">
               <p>我是第一个界面</p>
               <router-link to="/one/onesub1" tag="button">切换到第一个界面的子界面</router-link>
               <router-link to="/one/onesub2" tag="button">切换到第二个界面的子界面</router-link>
               
               <router-view></router-view>
           </div>
       </template>
       <template id="onesub1">
           <div class="onesub1page">
               <p>我是第一个界面的子界面1</p>
           </div>
       </template>
       <template id="onesub2">
           <div class="onesub2page">
               <p>我是第一个界面的子界面2</p>
           </div>
       </template>
       <template id="two">
           <div class="twopage">
               <p>我是第二个界面</p>
           </div>
       </template>
       <script type="text/javascript">
           const onesub1 = {
               template:"#onesub1"
           }
           const onesub2 = {
               template:"#onesub2"
           }
           const one = {
               template:"#one",
               components:{
                   onesub1:onesub1,
                   onesub2:onesub2
               }
           }
           const two = {
               template:"#two"
           }
           const routes = [
               {path:"/",redirect:"/one"},
               {
                   path:"/one",
                   component:one,
                   children:[
                       {path:"onesub1",component:onesub1},
                       {path:"onesub2",component:onesub2}
                   ]
               },
               {path:"/two",component:two}
           ]
           const router = new VueRouter({
               routes:routes,
               linkActiveClass:"router-active"
           })
           let vue = new Vue({
               el:"#app",
               router:router,
               data:{},
               methods:{},
               computed:{},
               components:{
                   one:one,
                   two:two
               }
           })
       </script>
   </body>

结果：

四.VueRouter中的命名视图

什么是命名视图?
命名视图和具名插槽很像，都是让不同的出口显示不同的内容
命名视图就是当路由地址被匹配的时候同时指定多个出口，并且每个出口中显示的内容不同

<body>
        <div id="app">
            <router-view name="name1"></router-view>
            <router-view name="name2"></router-view>
        </div>
        <template id="one">
            <div class="onepage">
                <p>我是第一个界面</p>
            </div>
        </template>
        <template id="two">
            <div class="twopage">
                <p>我是第二个界面</p>
            </div>
        </template>
        <script type="text/javascript">
            const one = {
                template:"#one"
            }
            const two = {
                template:"#two"
            }
            const routes = [
                {
                    path:"/",
                    components:{
                        name1:one,
                        name2:two
                    }
                }
            ]
            const router = new VueRouter({
                routes:routes,
                linkActiveClass:"router-active"
            })
            let vue = new Vue({
                el:"#app",
                router:router,
                data:{},
                methods:{},
                computed:{},
                components:{
                    one:one,
                    two:two
                }
            })
        </script>
    </body>

结果：

五.VueRouter中watch属性

什么是Watch属性?
Watch属性是专门用于监听数据变化的，只要数据发生了变化，就会自动调用对应数据的回调方法
Watch监听路由变化
Watch属性不仅仅能够监听数据的变化，还能够监听路由地址的变化
在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的
案例：简易计算器

    <body>
        <div id="app">
            <!-- 加法计算器：通过vue实例中上watch属性监听数据发生变化，只要数据发生变化就自动调用对应数据的回调方法 -->
            <input type="text" v-model="num1">
            <span>+</span>
            <input type="text" v-model="num2">
            <span>=</span>
            <input type="text" disabled v-model="res"> <br/><br/><br/>
            
            <!-- watch属性：监听路由地址变化 -->
            <router-link to="/one" tag="button">切换到第一界面</router-link>
            <router-link to="/two" tag="button">切换到第二界面</router-link>
            
            <router-view></router-view>
        </div>
        <template id="one">
            <div class="onepage">
                <p>我是第一界面</p>
            </div>
        </template>
        <template id="two">
            <div class="twopage">
                <p>我是第二界面</p>
            </div>
        </template>
        <script type="text/javascript">
            const one = {
                template:"#one"
            }
            const two = {
                template:"#two"
            }
            const routes = [
                {path:"/",redirect:"/one"},
                {path:"/one",component:one},
                {path:"/two",component:two}
            ]
            const router = new VueRouter({
                routes:routes,
                linkActiveClass:"router-active"
            })
            let vue = new Vue({
                el:"#app",
                router:router,
                data:{
                    num1:0,
                    num2:0,
                    res:0
                },
                methods:{},
                computed:{},
                components:{
                    one:one,
                    two:two
                },
                 //监听数据的变化，监听路由地址的变化，只要数据发生了变化，就会自动调用对应数据的回调方法
                watch:{
                    num1:function(newValue,oldValue){
                        this.res = parseInt(this.num1) + parseInt(this.num2);
                    },
                    num2:function(newValue,oldValue){
                        this.res = parseInt(this.num1) + parseInt(this.num2);
                    },
                    "$route.path":function(newValue,oldValue){
                        console.log(newValue,oldValue)
                    }
                }
            })
            //拿到挂载的路由对象
            console.log(vue.$route)
        </script>
    </body>

结果：

VueRouter的基本使用
什么是Vue Router?Vue Router和v-if/v-show一样，是用来切换组件的显示的v-if/v-...
VUE路由（1.router与route区别 2.路由跳转传参
路由的基本使用可参考 Vue路由使用总结 1.router与route的区别 1.router是VueRouter...
VueRouter基本示例
将官网说明书融合到一个网页中
使用 VueRouter 构建SPA单面应用DEMO
H5页面使用 VueRouter 构建SPA单面应用DEMO VueRouter 实现原理一个页面地址由协议/主...
VueRouter路由使用
认识前端路由路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在...
Vue2入门教程
仅作为入门教程，但很细致的实现了环境配置安装，基本框架使用，利用公用接口实现列表页面。Vue2+VueRouter...
router
常规的引入使用 import Vue from "vue";import VueRouter from "vue-...
vue2 & vue3 router keepalive 的使
vue2 router keep-alive的使用通过vueRouter 的meta 存放 keepAlive ...
Vue Router学习笔记（1）
JavaScript使用路由如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(Vu...
Vue.js 3.0 项目投入使用
1、Vue、vueRouter 项目中均使用 cdn引入的。 2、目前使用中还是有些坑需要填，2.0语法兼容会有...