Vue实战之Vue中路由 (Vue Router)

9.冄2.7.號

已于 2023-02-28 06:18:08 修改

阅读量387

点赞数

文章标签： vue

于 2021-08-05 13:13:45 首次发布

本文链接：https://blog.csdn.net/weixin_44950987/article/details/119305307

版权

vue 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

文章目录

Vue 实战
- 十二、Vue中路由（Vue Router）

Vue 实战

十二、Vue中路由（Vue Router）

Vue Router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1、路由

路由：根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

通俗定义：通过使用Vue Router 可以将现有Vue开发变得更加灵活，它可以根据前端请求url对应在页面中展示不同组件。

2、作用

用来在Vue中实现组件之间的动态切换

3、使用路由

（1）引入路由

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

（2）创建组件对象

//1.声明组件模板对象
const login = {
    template: `<div><h2>用户登录</h2></div>`,
}

const register = {
    template: `<div><h2>用户注册</h2></div>`,
}

（3）定义路由对象的规则

//2.定义路由对象的规则
//创建路由对象
const router = new VueRouter({
    routes: [
        {path: '/login', component: login},//path：路由的路径 component：路径对应的组件
        {path: '/register', component: register},
    ]
});

（4）将路由对象注册到Vue实例中

//3.将路由对象注册到Vue实例中
const app = new Vue({
    el: "#app",
    data: {
        msg: "Vue router 基本使用"
    },
    methods: {},
    router: router,//设置路由对象
})

（5）在页面中显示路由的组件

<!--显示路由的组件-->
<router-view></router-view>

（6）根据链接切换路由

<!--根据链接切换路由-->
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

（7）默认路由

作用：用来在第一次进入界面时显示一个默认的组件

//创建路由规则对象
const router = new VueRouter({
    routes: [ //配置路由规则  //redirect: 路由重定向
        {path: '/', redirect: '/login'},//redirect: 用来当访问的是默认路由 "/" 时 跳转到指定的路由展示  推荐使用
        {path: '/login', component: login},
        {path: '/reg', component: reg},
        {path: '*', component: notFound},//这个路由必须要放在路由规则最后后面
    ]
});

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--4.显示路由的组件-->
    <router-view></router-view>

    <!--5.根据链接切换路由-->
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //1.声明组件模板对象
    const login = {
        template: `<div><h2>用户登录</h2></div>`,
    }

    const register = {
        template: `<div><h2>用户注册</h2></div>`,
    }

    //2.定义路由对象的规则
    //创建路由对象
    const router = new VueRouter({
        routes: [
            {path: '/login', component: login},//path：路由的路径 component：路径对应的组件
            {path: '/register', component: register},
        ]
    });

    //3.将路由对象注册到Vue实例中
    const app = new Vue({
        el: "#app",
        data: {
            msg: "Vue router 基本使用"
        },
        methods: {},
        router: router,//设置路由对象
    })
</script>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <a href="#/login">用户登录</a>
    <a href="#/reg">用户注册</a>
    <!--显示路由组件标签-->
    <router-view></router-view>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //登录组件
    const login = {
        template: `<div><h3>用户登录</h3></div>`
    };
    //注册组件
    const reg = {
        template: `<div><h3>用户注册</h3></div>`
    };
    //404组件
    const notFound = {
        template: `<div><h3>404 Not Found!,当前页面走丢了!!!!</h3></div>`
    };

    //1.创建路由规则对象
    const router = new VueRouter({
        routes: [ //配置路由规则  //redirect: 路由重定向
            {path: '/', redirect: '/login'},
            {path: '/login', component: login},
            {path: '/reg', component: reg},
            {path: '*', component: notFound},//这个路由必须要放在路由规则最后后面
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 基本使用"
        },
        methods: {},
        router,//注册路由
    });
</script>

在这里插入图片描述

4、vue router 的基本使用之使用router-link切换路由

作用：用来替换我们在切换路由时使用a标签切换路由

好处：就是可以自动给路由路径加入#不需要手动加入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>


    <!--路径切换路由: 根据请求路径切换显示不同组件-->
    <!--切换路由链接-->
    <a href="#/login">用户登录</a>
    <a href="#/register">用户注册</a>

	<!--router-link to属性用来书写路由路径   tag属性:用来将router-link渲染成指定的标签-->
    <router-link to="/login" tag="button">我要登录</router-link>
    <router-link to="/register" tag="button">点我注册</router-link>

    <!--切换路由标签  router-link  标签必须加入 to属性 to="路由路径" -->
    <router-link to="/login">用户登录</router-link>
    <router-link to="/register">用户注册</router-link>

    <!--切换路由标签 使用路由路径对象-->
    <router-link :to="{path:'/login'}">用户登录</router-link>
    <router-link :to="{path:'/register'}">用户注册</router-link>

	<!--========================================================-->
    <!--名称切换路由: 根据路由对象名称切换路由显示不同组件 根据路由名称切换路由只能使用router-link  推荐使用命名路由-->
    <router-link :to="{name:'Login'}">用户登录</router-link>
    <router-link :to="{name:'Register'}">用户注册</router-link>


    <!--展示路由组件标签-->
    <router-view/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //login
    const login = {
        template: `<div><h4>用户登录</h4></div>`
    };

    //register
    const register = {
        template: `<div><h4>用户注册</h4></div>`
    };

    //1.创建路由规则对象
    const router = new VueRouter({
        routes: [
            //name:这个属性代表路由对象名称  用来给路由对象一个唯一名称标识
            {path: '/login', component: login, name: 'Login'},
            {path: '/register', component: register, name: 'Register'},
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 基本使用之使用router-link切换路由"
        },
        methods: {},
        router,//注册路由对象
    });
</script>

总结

router-link 用来替换使用a标签实现路由切换好处是不需要书写#号直接书写路由路径
router-link to属性用来书写路由路径 tag属性：用来将router-link渲染成指定的标签

5、vue router 的基本使用之在js代码中切换路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>


    <!--切换路由: 1.通过标签直接切换   2.在js代码中切换-->
    <router-link :to="{name:'Login'}">用户登录</router-link>
    <router-link :to="{name:'Register'}">用户注册</router-link>


    <!--2.在js代码中切换路由-->
    <button @click="login">用户登录</button>
    <button @click="register">用户注册</button>

    <!--展示路由组件标签-->
    <router-view/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //login
    const login = {
        template: `<div><h4>用户登录</h4></div>`
    };
    //register
    const register = {
        template: `<div><h4>用户注册</h4></div>`
    };

    //1.创建路由规则对象
    const router = new VueRouter({
        routes: [
            //name:这个属性代表路由对象名称  用来给路由对象一个唯一名称标识
            {path: '/login', component: login, name: 'Login'},
            {path: '/register', component: register, name: 'Register'},
        ]
    });


    //解决同一个路由多次切换报错的问题
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
    };

    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 基本使用之在js代码中切换路由"
        },
        methods: {
            login() {
                //发送axios请求完成登录 响应回来之后切换路由到主页
                //this.$route object 当前路由对象   this.$router vueRouter  代表路由管理器对象
                //console.log(this.$route.name);
                //this.$router.push('/login');//切换路由
                //this.$router.push({path:'/login'});
                //在vuerouter 中多次切换相同路由出现错误 1.每次切换之前手动判断   2.加入官方一段配置解决错误问题
                // if(this.$route.name!='Login'){
                //     this.$router.push({name:'Login'});//使用名称切换
                // }
                this.$router.push({name: 'Login'});//使用名称切换
            },
            register() {
                //console.log(this.$route.name);
                // if(this.$route.name!='Register') {
                //     this.$router.push({name: 'Register'});//使用名称切换
                // }
                this.$router.push({name: 'Register'});//使用名称切换
            }
        },
        router,//注册路由对象
    });
</script>

（1）路由切换的两种方式

在这里插入图片描述

（2）在vue router中相同路由多次切换报错的问题

在这里插入图片描述

6、路由中参数传递

（1）第一种方式传递参数：传统方式

通过?号形式拼接参数

<div id="app">
    <h1>{{msg}}</h1>

    <!--queryString-->
    <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

    <!--展示路由组件标签-->
    <router-view/>
</div>

组件中获取参数

<script>
    //login
    const login = {
        template: `<div><h4>用户登录</h4></div>`,
        data() {
            return {}
        },
        created() { //生命周期 在执行已经组件内部事件 和 生命周期函数注册 自身 data methods computed属性注入和校验
            console.log("=================" + this.$route.query.id + "================" + this.$route.query.name);
        }
    };


    //创建路由规则对象
    const router = new VueRouter({
        routes: [
            {path: '/login', component: login, name: 'Login'},
        ],
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 的基本使用之参数传递"
        },
        methods: {},
        router,//注册路由对象
    })
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--queryString-->
    <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

    <!--展示路由组件标签-->
    <router-view/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //login
    const login = {
        template: `<div><h4>用户登录</h4></div>`,
        data() {
            return {}
        },
        created() { //生命周期 在执行时已经完成组件内部事件 和 生命周期函数注册 自身 data methods computed属性注入和校验
            console.log("=================" + this.$route.query.id + "================" + this.$route.query.name);
        }
    };


    //创建路由规则对象
    const router = new VueRouter({
        routes: [
            {path: '/login', component: login, name: 'Login'},
        ],
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 的基本使用之参数传递"
        },
        methods: {},
        router,//注册路由对象
    })
</script>

（2）第二种方式传递参数：restful

通过使用路径方式传递参数

<div id="app">
    <h1>{{msg}}</h1>

    <!--restful-->
    <router-link to="/register/21/lisi">我要注册</router-link>

    <!--展示路由组件标签-->
    <router-view/>
</div>

组件中获取参数

<script>
    //register
    const register = {
        template: `<div><h4>用户注册</h4></div>`,
        created() { //生命周期 在执行已经组件内部事件 和 生命周期函数注册 自身 data methods computed属性注入和校验
            console.log("=================" + this.$route.params.id + "================" + this.$route.params.name);
        }
    };


    //创建路由规则对象
    const router = new VueRouter({
        routes: [
            {path: '/register/:id/:name', component: register},
        ],
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 的基本使用之参数传递"
        },
        methods: {},
        router,//注册路由对象
    })
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--restful-->
    <router-link to="/register/21/lisi">我要注册</router-link>

    <!--展示路由组件标签-->
    <router-view/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //register
    const register = {
        template: `<div><h4>用户注册</h4></div>`,
        created() { //生命周期 在执行时已经完成组件内部事件 和 生命周期函数注册 自身 data methods computed属性注入和校验
            console.log("=================" + this.$route.params.id + "================" + this.$route.params.name);
        }
    };


    //创建路由规则对象
    const router = new VueRouter({
        routes: [
            {path: '/register/:id/:name', component: register},
        ],
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 的基本使用之参数传递"
        },
        methods: {},
        router,//注册路由对象
    })
</script>

代码示例之参数传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--
        标签形式切换路由

        地址栏传递参数分为两种方式：
            1.queryString  ?传参              this.$route.query.key
            2.restful      路径传递参数 /xx    this.$route.params.key
    -->
    <a href="#/login?name=xiaozhu&password=123456">用户登录</a>
    <a href="#/register/21/xiaozhu">用户注册</a>

    <!--query-->
    <router-link to="/login?name=xiaohei&password=123456">用户登录</router-link>
    <router-link :to="{path:'/login',query:{name:'xiaowang',password:123456}}">用户登录</router-link>
    <router-link :to="{name:'Login',query:{name:'xiaoli',password:1234567}}">用户登录</router-link>

    <!--restful-->
    <router-link to="register/111/xiaoxiao">用户注册</router-link>
    <router-link :to="{path:'/register/22/xiaohong'}">用户注册</router-link>
    <router-link :to="{name:'Register',params:{id:22,name:'xiaojiang'}}">用户注册</router-link>

    <!--切换路由 使用router-link-->
    <!--<router-link :to="{name:'Login'}">用户登录</router-link>
    <router-link :to="{name:'Register'}">用户注册</router-link>-->

    <!--展示路由组件标签-->
    <router-view/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //login
    const login = {
        template: `<div><h4>用户登录</h4></div>`,
        created() { //生命周期 在执行时已经完成组件内部事件和生命周期函数注册 同时自身data、methods、computed属性注入和校验
            console.log("created");
            console.log(this.$route);//获取当前路由对象
            console.log("name：" + this.$route.query.name);//获取当前路由对象
            console.log("password：" + this.$route.query.password);//获取当前路由对象
        }
    };

    //register
    const register = {
        template: `<div><h4>用户注册</h4></div>`,
        created() {
            console.log(this.$route);
            console.log(this.$route.params.id);
            console.log(this.$route.params.name);
        }
    };

    //创建路由规则对象
    const router = new VueRouter({
        routes: [
            {path: '/login', component: login, name: 'Login'},
            {path: '/register/:id/:name', component: register, name: 'Register'},
        ],
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 的基本使用之参数传递"
        },
        methods: {},
        router,//注册路由对象
    })
</script>

（3）路由中两种传递参数的方式

在这里插入图片描述

7、嵌套路由

（1）声明最外层路由和内层路由

<template id="product">
    <div>
        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>

        <router-view></router-view>

    </div>
</template>

//声明组件模板
    const product = {
        template: '#product'
    };

    const add = {
        template: '<h4>商品添加</h4>'
    };

    const edit = {
        template: '<h4>商品编辑</h4>'
    };

（2）创建路由对象含有嵌套路由

const router = new VueRouter({
    routes: [
        {
            path: '/product',
            component: product,
            children: [
                {path: 'add', component: add},
                {path: 'edit', component: edit},
            ]
        },
    ]
});

（4）注册路由对象

const app = new Vue({
    el: "#app",
    data: {
        msg: "vue router 的基本使用之嵌套路由",
    },
    methods: {},
    router,//注册路由对象
})

（5）测试路由

<div id="app">
    <h1>{{msg}}</h1>

    <router-link to="/product">商品管理</router-link>

    <!--展示路由组件标签-->
    <router-view></router-view>
</div>

完整代码简洁版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <router-link to="/product">商品管理</router-link>

    <!--展示路由组件标签-->
    <router-view></router-view>
</div>
</body>
</html>
<!--这个template是从product组件中提取出来的，要放在Vue实例范围外，要不然会被Vue加载-->
<template id="product">
    <div>
        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>

        <router-view></router-view>

    </div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>


    //声明组件模板
    const product = {
        template: '#product'
    };

    const add = {
        template: '<h4>商品添加</h4>'
    };

    const edit = {
        template: '<h4>商品编辑</h4>'
    };

    const router = new VueRouter({
        routes: [
            {
                path: '/product',
                component: product,
                children: [
                    {path: 'add', component: add},
                    {path: 'edit', component: edit},
                ]
            },
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 的基本使用之嵌套路由",
        },
        methods: {},
        router,//注册路由对象
    })
</script>

在这里插入图片描述

完整代码复杂版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue之系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <router-link :to="{name:'users'}">用户列表</router-link>
    <!--展示路由组件-->
    <router-view></router-view>
</div>
</body>
</html>
<!--这个template是从用户列表组件中提取出来的，要放在Vue实例范围外，要不然会被Vue加载-->
<template id="users">
    <div>
        <h3>用户列表</h3>
        <a href="#/users/useradd">添加用户信息</a>
        <table border="1">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>salary</th>
                <th>操作</th>
            </tr>
            <tr v-for="user,index in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.salary}}</td>
                <td><a href="">删除</a>
                    <router-link :to="{name:'useredit',query:{id:user.id}}">修改</router-link>
                </td>
            </tr>
        </table>
        <!--展示子路由组件标签-->
        <router-view></router-view>
    </div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>


    //定义用户列表
    const users = {
        template: '#users',
        data() {
            return {
                users: []
            }
        },
        created() {
            //发送axios请求查询所有
            this.users = [{id: 1, name: 'xiaochen', age: 23, salary: 2300}]
        }
    };

    //定义用户添加组件
    const useradd = {
        template: `<div><form action="">姓名: <input type="text"> <br> 年龄: <input type="text"> <br>  工资: <input type="text"> <br> <input type="submit" value="提交"></form></div>`
    };

    const useredit = {
        template: `<div><form action="">id: <input type="text" v-model="user.id"> <br> 姓名: <input type="text" v-model="user.name"> <br> 年龄: <input type="text" v-model="user.age"> <br>  工资: <input type="text" v-model="user.salary"> <br> <input type="button" @click="editUser" value="提交"></form></div>`,
        data() {
            return {
                user: {}
            }
        },
        methods: {
            editUser() {
                //发送axios请求更新用户
                // axios.post("url",this.user).then(res=>{
                //     this.user = {};//清空数据
                //     this.$router.push({name:'users'})//切换路由
                // });
                this.$router.push({name: 'users'})//切换路由
            }
        },
        created() {
            let id = this.$route.query.id;
            console.log("updated: ", id);
            //发送axios请求
            //axios.get("url?id="+id).then(res=>this.user = res.data);
            this.user = {id: id, name: 'xiaochen', age: 23, salary: 2300};
        }
    };

    //定义路由规则对象
    const router = new VueRouter({
        routes: [
            {
                path: '/users', name: 'users', component: users,
                children: [ //嵌套子组件路由 注意:嵌套路由中子路由不能使用/开头   访问子路由 /users/useradd
                    {path: 'useradd', name: 'useradd', component: useradd},
                    {path: 'useredit', name: 'useredit', component: useredit},
                ]
            },
        ]
    });


    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue router 基本使用之嵌套路由"
        },
        methods: {},
        router,//注册路由
    });
</script>