vue2路由

一、介绍

本文是以前学习 vue2时整理的，对于目前的 vue3有些过时。

专注后端，前端只作为使用学习。

二、路由

作用：用于维护URL跳转和页面之间的关系

使用步骤：

引入vue-router.js文件（必须先引入vue.js）

配置路由规则，url和对应的页面的配置const routes = [{ path: "/", compontent: "组件" }]

创建路由实例对象const router = new VueRouter({routes})

routes：路由规则

path：访问的url

component：指定的组件

name：路由规则名

props：是否解耦路由参数

redirect：路由重定向

# 当访问/home时，会自动跳转至/index
[{ path: "/home" redirect: "/index" }]

linkActiveClass：指定当前路由的激活类名，默认为router-link-active

mode：默认为hash，路径上会多出#号，可修改为history（此模式必须在服务器打开网页）

将路由实例对象注册到vue实例中 new Vue({ router })

在页面中使用路由占位符，来为路由的组件占位<router-view />

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <a href="#/">主页</a> <a href="#/details">详情</a> <a href="#/info">个人中心</a>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // 只能通过变量的方式获得组件
    const coma = {
        template: `
            <div>
	            <h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
            <div>
            	<h1>{{ h1 }}</h1>
    		</div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
    	    <div>
	    	    <h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma },
            { path: "/details", component: comb },
            { path: "/info", component: comc },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "路由"
        },
        router: router
    })
</script>

1）router-link标签，及当前路由高亮

• <router-link>
• tag：指定生成的元素标签，默认为a标签
• to：跳转的路由路径
• exact：路由严格匹配模式
• replace：点击路由跳转后，不会留下history记录

<style>
    span{
        margin-left: 10px;
        font-size: 16px;
    }
    .router-link-active{
        color: red;
        font-size: 22px;
    }
</style>

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <!-- tag 默认生成a标签，可指定生成目标元素 -->
    <!-- exact 路由严格匹配 -->
    <router-link tag="span" to="/" exact>主页</router-link>
    <router-link tag="span" to="/details">详情</router-link>
    <router-link tag="span" to="/info">个人中心</router-link>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const coma = {
        template: `
            <div>
	            <h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
            <div>
            	<h1>{{ h1 }}</h1>
    		</div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
    	    <div>
	    	    <h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };

    var router = new VueRouter({
        // 指定当前路由的类名，默认为router-link-active
        linkActiveClass: "router-link-active",
        routes: [
            { path: "/", component: coma },
            { path: "/details", component: comb },
            { path: "/info", component: comc },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "路由"
        },
        router: router
    })
</script>

2）404路由

• 介绍：当访问一个不存在的url时，指向404路由配置的组件

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <a href="#/">主页</a> <a href="#/details">详情</a> <a href="#/info">个人中心</a>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
    var notFound = {
        template: `
			<h1>404，您的页面未找到哦</h1>
		`
    }
    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma },
            { path: "*", component: notFound }
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "路由"
        },
        router: router
    })
</script>

3）命名路由

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <router-link :to="{ name: 'index' }" exact>主页</router-link>
    <router-link :to="{ name: 'details' }">详情</router-link>
    <router-link :to="{ name: 'info' }">个人中心</router-link>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
    // 只能通过变量的方式获得组件
    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
    		</div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
    		</div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
    		</div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma, name: "index" },
            { path: "/details", component: comb, name: "details" },
            { path: "/info", component: comc, name: "info" },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "路由"
        },
        router: router
    })
</script>

4）动态路由

• 作用：可以获取当前url上的参数，进而做出一些处理

4.1、基本使用

• 作用：获取url上绑定的占位符
• 路径示例：/user/get/101
• 实现步骤：

1. 定义占位：{ path: "/info/:id", component: comc }
2. 获取参数对象：this.$route.params

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <router-link to="/">主页</router-link>
    <router-link to="/details">详情</router-link>
    <router-link to="/info">个人中心</router-link>
    <router-link to="/info/300">300的个人中心</router-link>
    <router-link to="/info/500">500的个人中心</router-link>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        // 使用 $route.params 可以找到参数
        template: `
			<div>
				<h1>{{ h1 }}</h1>
				<h2>id:{{ $route.params.id }}</h2>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
        created(){
            console.log(this.$route.params);
        }
    };


    var router = new VueRouter({
        routes: [
            { path: "/", component: coma, },
            { path: "/details", component: comb, },
            { path: "/info/:id", component: comc, },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "动态路由"
        },
        router: router
    })
</script>

4.2、获取参数及router-link标签传递参数

• 作用：获取?号后的参数
• 路径示例：/user/get?name=banmoon&sex=1
• 实现步骤

1. 正常定义路由：{ name: "infoPage", path: "/info", component: comc }
2. 获取参数：this.$route.query

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <router-link to="/">主页</router-link>
    <router-link to="/details">详情</router-link>
    <router-link to="/info">个人中心</router-link>
    <ul>
        <router-link tag="li" :to="{ path: '/info', query: { name: 'banmoon', sex: 1 } }">个人中心查询1</router-link>
        <router-link tag="li" :to="{ path: '/info', query: { name: 'user', sex: 2 } }">个人中心查询2</router-link>
        <!-- 路由命名查询 -->
        <router-link tag="li" :to="{ name: 'infoPage', query: { name: 'san', sex: 1 } }">命名查询</router-link>
    </ul>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        // 使用 $route.params 可以找到参数
        template: `
			<div>
		        <h1>{{ h1 }}</h1>
        		<h2>查询条件</h2>
		        <ul>
        			<li v-for="(value, key) in $route.query">
				        {{ key }} : {{ value }}
		            </li>
        	    </ul>
            </div>
        `,
        data() {
            return{
                h1: "个人中心",
            }
        },
        created(){
            console.log(this.$route.query);
        }
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma, },
            { path: "/details", component: comb, },
            { name: "infoPage", path: "/info", component: comc, },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "动态路由"
        },
        router: router
    })
</script>

5）编程式路由

• js方法实现路由跳转 router.push()：导航跳转router.replace()：同上，但它不会向 history 添加新记录，也就是无痕浏览

5.1、router.push()

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <button @click="skip01">主页</button>
    <button @click="skip02">详情</button>
    <button @click="skip03">个人中心</button>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    const coma = {
        template: `
            <div>
	            <h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
				<h2>查询条件</h2>
				<ul>
					<li v-for="(value, key) in $route.query">
						{{ key }} : {{ value }}
				    </li>
			    </ul>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };


    var router = new VueRouter({
        routes: [
            { path: "/", component: coma },
            { name: "detailsPage", path: "/details", component: comb },
            { path: "/info", component: comc },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "编程式导航"
        },
        router: router,
        methods: {
            skip01(){
                //this.$router.push("/");
                this.$router.push({ path: "/" });
            },
            skip02(){
                this.$router.push({ name: 'detailsPage' });
            },
            skip03(){
                this.$router.push({ path: '/info', query: { name: 'banmoon', sex: 1 } });
            }
        }
    })
</script>

5.2、router.replace()

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <button @click="skip01">主页</button>
    <button @click="skip02">详情</button>
    <button @click="skip03">个人中心</button>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
				<h2>查询条件</h2>
				<ul>
					<li v-for="(value, key) in $route.query">
						{{ key }} : {{ value }}
				    </li>
			    </ul>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };


    var router = new VueRouter({
        routes: [
            { path: "/", component: coma },
            { name: "detailsPage", path: "/details", component: comb },
            { path: "/info", component: comc },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "编程式导航"
        },
        router: router,
        methods: {
            skip01(){
                this.$router.replace({ path: "/" });
            },
            skip02(){
                this.$router.replace({ name: 'detailsPage' });
            },
            skip03(){
                this.$router.replace({ path: '/info', query: { name: 'banmoon', sex: 1 } });
            }
        }
    })
</script>

5.3、$router.go()

<div id="app">
    <h1>{{ title }}</h1>
    <button @click="goback(-1)">返回上一页</button>
    <button @click="goback(1)">进入下一页</button>
    <hr>
    <router-link to="/">主页</router-link>
    <router-link to="/details">详情</router-link>
    <router-link to="/info">个人中心</router-link>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma },
            { path: "/details", component: comb },
            { path: "/info", component: comc },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "编程式导航"
        },
        router: router,
        methods: {
            goback(n){
                this.$router.go(n);
            }
        }
    })
</script>

6）路由设置title

• 作用：不同的路由拥有不同的浏览器标题
• 步骤：

1. 定义路由，添加自定义属性title：{ path: '/', component: coma, title: "标题" }
2. 在生命周期created()中获取路由上的自定义属性，使用document修改title

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <!-- <a href="#/">主页</a> <a href="#/details">详情</a> <a href="#/info">个人中心</a> -->
    <router-link to="/">主页</router-link>
    <router-link to="/details">详情</router-link>
    <router-link to="/info">个人中心</router-link>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const coma = {
        template: `
            <div>
            	<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
        created(){
            console.log(this.$route.meta);
            document.querySelector("title").innerHTML = this.$route.meta.title;
        }
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
        created(){
            document.querySelector("title").innerHTML = this.$route.meta.title;
        }
    };
    const comc = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
        created(){
            document.querySelector("title").innerHTML = this.$route.meta.title;
        }
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma, meta: { title: "主页" } },
            { path: "/details", component: comb, meta: { title: "详情" } },
            { path: "/info", component: comc, meta: { title: "个人信息" } },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "路由设置title"
        },
        router: router
    })
</script>

7）嵌套路由

• 作用：上级路由的结构不会改变，只是局部刷新
• 步骤：

1. 定义路由：{ children: [{...}, {...}] }
2. 使用占位：在上一级路由的模板中使用router-view

• 注意：二级路由的path前缀一定要是一级路由的path

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="app" class="container">
    <h1>{{ title }}</h1>
    <hr>
    <router-link tag="button" to="/" class="btn btn-success">主页</router-link>
    <router-link tag="button" to="/details" class="btn btn-primary">详情</router-link>
    <router-link tag="button" to="/info" class="btn btn-default">个人中心</router-link>
    <hr>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>

    const coma = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "主页",
            }
        },
    };
    const comb = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
				<router-link class="btn btn-primary" to="/details/flower">花语</router-link>
				<router-link class="btn btn-info" to="/details/starry">星空</router-link>
				<hr>
				<router-view></router-view>
		    </div>
		`,
        data() {
            return{
                h1: "详情",
            }
        },
    };
    const comc = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "个人中心",
            }
        },
    };
    const comd = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "花语详情",
            }
        },
    };
    const come = {
        template: `
			<div>
				<h1>{{ h1 }}</h1>
		    </div>
		`,
        data() {
            return{
                h1: "星空详情",
            }
        },
    };

    var router = new VueRouter({
        routes: [
            { path: "/", component: coma },
            { name: "detailsPage", path: "/details", component: comb,
             children: [
                 { path: "/details/flower", component: comd },
                 { path: "/details/starry", component: come }
             ]
            },
            { path: "/info", component: comc },
        ]
    });

    new Vue({
        el: "#app",
        data: {
            title: "编程式导航"
        },
        router: router,
    })
</script>

8）$router和==$route==的区别

• $router：是路由对象的实例，相当于new VueRouter()这个对象
• 编程式跳转方法等
• route：当前路由的实例对象，每一个路由都是一个独立的对象，此对象相当于{ path: "/", compontent: coma } route.query：对象，包含路由中查询参数的键值对。会拼接到路由url的?后面route.name：当前路由的名字，如果没有使用具体路径，则名字为空 route.router：当前路由规则所属的路由器route.matchd：数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对象

三、最后

我是半月，你我一同共勉！