AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue路由

2022-06-11 123
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue路由

Vue路由基础


Vue属于单页应用（SPA），即整个应用程序中只有一个html页面。

在单页应用中（SPA），由于只是更改DOM来模拟多页面，所以页面浏览历史记录的功能就丧失了。此时，就需要前端路由来实现浏览历史记录的功能。


样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/home">home</router-link>
      <router-link to="/news">news</router-link>
      <router-view></router-view>
    </div>
    <script>
      const Home = {
        template: '<div>首页</div>'
      }
      const News = {
        template: '<div>新闻</div>'
      }
      var router = new VueRouter({
        // mode: 'hash',
        mode: 'history',
        routes: [{
          path: '/home',
          component: Home
        }, {
          path: '/news',
          component: News
        }]
      });
      var vm = new Vue({
        el: '#app',
        data: {},
        // 将路由添加到Vue中
        router,
      });
    </script>
  </body>
</html>

效果截图：


点击home时：

1.png



点击new时：


2.png


嵌套路由


实际应用界面，通常由多层嵌套的组件组合而成。 比如，我们 “新闻”组件中，还嵌套着 “国内”和 “国际”组件，那么URL对应就是/news/guonei和/news/guoji。

样例代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                <!-- 使用 router-link 组件来导航. to属性指定导航地址-->
                <router-link to="/home">home</router-link>
                <router-link to="/news">news</router-link>
            </p>
            <!-- 路由出口（路由匹配到的组件将渲染在这里） -->
            <router-view></router-view>
        </div>
        <script>
            // 1. 定义（路由）组件。
            const Home = {
                template: `<div>首页</div>`
            }
            const News = {
                template: `<div>
                    <p>
                        <router-link to="/news/guonei">国内新闻</router-link>
                        <router-link to="/news/guoji">国际新闻</router-link>
                    </p>
                    <router-view></router-view>
                </div>`
            }
            const GuoNeiNews = {
                template: `<div>这里显示国内新闻</div>`
            }
            const GuoJiNews = {
                template: `<div>这里显示国际新闻。。。。</div>`
            }
            // 2. 定义路由规则对象（每个路由应该映射一个组件）
            const routes = [{
                    path: '/home',
                    component: Home,
                }, {
                    path: '/news',
                    component: News,
                    children: [{
                            path: '/news/guonei',
                            component: GuoNeiNews
                        }, {
                            path: '/news/guoji',
                            component: GuoJiNews
                        }
                    ]
                },
            ]
            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                //如果路由规则对象名也为routes，那么就可以简写为 routes
                routes: routes
            })
            var vm = new Vue({
                el: '#app',
                data: {},
                // 将路由添加到Vue中
                router,
            });
        </script>
    </body>
</html>

效果动图：

1.gif


路由重定向


路由重定向表示将你原来在转发列表中发向一台路由的路径改成另外一条路径，也就相当于让你的数据走另外一条路到服务器。


样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                <!-- 使用 router-link 组件来导航. to属性指定导航地址-->
                <router-link to="/home">home</router-link>
                <router-link to="/news">news</router-link>
            </p>
            <!-- 路由出口（路由匹配到的组件将渲染在这里） -->
            <router-view></router-view>
        </div>
        <script>
            // 1. 定义（路由）组件。
            const Home = {
                template: `<div>首页</div>`
            }
            const News = {
                template: `<div>
                    <p>
                        <router-link to="/news/guonei">国内新闻</router-link>
                        <router-link to="/news/guoji">国际新闻</router-link>
                    </p>
                    <router-view></router-view>
                </div>`
            }
            const GuoNeiNews = {
                template: `<div>这里显示国内新闻</div>`
            }
            const GuoJiNews = {
                template: `<div>这里显示国际新闻。。。。</div>`
            }
            // 2. 定义路由规则对象（每个路由应该映射一个组件）
            const routes = [
                /* {
                    path:'/',
                    redirect:'/home'
                }, */
                {
                    path: '/',
                    redirect: {
                        name: 'MyHome'
                    }
                },
                {
                    path: '/home',
                    name: 'MyHome',
                    component: Home,
                }, {
                    path: '/news',
                    component: News,
                    children: [{
                            path: '/news/guonei',
                            component: GuoNeiNews
                        }, {
                            path: '/news/guoji',
                            component: GuoJiNews
                        }
                    ]
                },
            ]
            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                //如果路由规则对象名也为routes，那么就可以简写为 routes
                routes: routes
            })
            var vm = new Vue({
                el: '#app',
                data: {},
                // 将路由添加到Vue中
                router,
            });
        </script>
    </body>
</html>

当我们访问#/时会自动帮我们跳转到#/home这也就是重定向。


效果截图：

1.gif


路由传参


路由传参有多种方式，常用的有两种：params与query。


params形式传参


注意：


使用v-bind绑定to属性。

to属性的值是一个json对象，此对象有两个属性：name属性和params属性。

name属性就是要路由的对象。所以，在路由规则列表中，每一个路由规则都应用有一个name值。

params属性就是要传递的参数。也是一个json对象。

组件接收参数时，使用 this.$route.params.参数名 的形式。

样例代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link :to="{name:'News',params:{msg:'国内'}}">点击这里会把国内传过去</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script>
            const News = {
                data(){
                    return {
                        msg:''
                    }
                },
                template: `<div> {{msg}}新闻</div>`,
                created(){
                    this.msg = this.$route.params.msg;
                    console.log(this.$route.params)
                }
            }
            // 2. 定义路由规则对象（每个路由应该映射一个组件）
            const routes = [
                {
                    path: '/news',
                    name: 'News',
                    component: News,
                }
            ]
            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                //如果路由规则对象名也为routes，那么就可以简写为 routes
                routes: routes
            })
            var vm = new Vue({
                el: '#app',
                data: {},
                // 将路由添加到Vue中
                router,
            });
        </script>
    </body>
</html>

效果动图：

1.gif


query形式传参


注意：


to属性的值仍然是一个json对象，但是两个属性变了，一个是path，一个是query。

path属性就是路由地址，对应路由规则中的path值。

query属性就是要传递的参数。也是一个json对象。

组件接收参数时，使用 this.$route.query.参数名 的形式。

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <p>
            <router-link :to="{path:'/home',query:{msg:'hello world!'}}">home</router-link>
            <router-link :to="{path:'/news',query:{id:id,name:name}}">news</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        const Home = {
            template: '<div>首页内容： {{this.$route.query.msg}} </div>'
        }
        const News = {
            template: `<div>新闻 </br>
                            参数id：{{this.$route.query.id}}</br>
                            参数name：{{this.$route.query.name}}
                        </div>`
        }
        const routes = [{
            path: '/home',
            component: Home
        }, {
            path: '/news',
            component: News
        }]
        const router = new VueRouter({
            routes
        })
        var vm = new Vue({
            el: '#app',
            data: {
                id:666,
                name:'Keafmd'
            },
            router
        })
    </script>
  </body>
</html>

效果动图：

1.gif


params方式与query方式的区别


query方式传值：

1.png

params方式传值：

2.png


总结：params方式与query方式的区别：


query方式：

类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。

利用路由规则中的path跳转。

params方式：

类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。

利用路由规则中的name跳转。


编程式路由


利用JS实现路由跳转


router-link标签可以实现页面超链接形式的路由跳转。但是实际开发中，在很多情况下，需要通过某些逻辑判断来确定如何进行路由跳转。也就是说：需要在js代码中进行路由跳转。此时可以使用编程式路由。


使用this.$router.push方法可以实现路由跳转，方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。

通过this.$router.go(n)方法可以实现路由的前进后退，n表示跳转的个数，正数表示前进，负数表示后退。

如果只想实现前进后退可以使用this.$router.forward()（前进一页），以及this.$router.back()（后退一页）。

样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <p>
            <button @click="toHome">首页</button>
            <button @click="toNews">新闻</button>
            <button @click="toLogin">登陆</button>
            <button @click="doForward1">前进</button>
            <button @click="doForward2">前进</button>
            <button @click="doBack1">后退</button>
            <button @click="doBack2">后退</button>
        </p>
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻</div>'
        }
        const Login = {
            template: '<div>登陆</div>'
        }
        const routes = [{
            path: '/',
            component: Home
        }, {
            path: '/home',
            component: Home
        }, {
            path: '/news',
            component: News
        }, {
            path: '/login',
            component: Login
        }]
        const router = new VueRouter({
            routes
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            router,
            methods:{
                toHome(){
                    //无参数时，push方法中直接写路由地址
                    this.$router.push('/home');
                },
                toNews(){
                    //有参数时，push方法中写一个json对象
                    this.$router.push({path:'/news',query:{name:'zhangsan'}});
                },
                toLogin(){
                    this.$router.push('/login');
                },
                doForward1(){
                    this.$router.forward();
                },
                doForward2(){
                    this.$router.go(1);
                },
                doBack1(){
                    this.$router.back();
                },
                doBack2(){
                    this.$router.go(-1);
                }
            }
        })
    </script>
  </body>
</html>

效果动图：

1.gif


通过watch实现路由监听


通过watch属性设置监听$route变化，达到监听路由跳转的目的。

在上面代码中添加watch监听：


watch: {
    // 监听路由跳转。
    $route(newRoute, oldRoute) {
        console.log('watch', newRoute, oldRoute)
    }
}

完整代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <p>
            <button @click="toHome">首页</button>
            <button @click="toNews">新闻</button>
            <button @click="toLogin">登陆</button>
            <button @click="doForward1">前进</button>
            <button @click="doForward2">前进</button>
            <button @click="doBack1">后退</button>
            <button @click="doBack2">后退</button>
        </p>
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻</div>'
        }
        const Login = {
            template: '<div>登陆</div>'
        }
        const routes = [{
            path: '/',
            component: Home
        }, {
            path: '/home',
            component: Home
        }, {
            path: '/news',
            component: News
        }, {
            path: '/login',
            component: Login
        }]
        const router = new VueRouter({
            routes
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            router,
            methods:{
                toHome(){
                    //无参数时，push方法中直接写路由地址
                    this.$router.push('/home');
                },
                toNews(){
                    //有参数时，push方法中写一个json对象
                    this.$router.push({path:'/news',query:{name:'zhangsan'}});
                },
                toLogin(){
                    this.$router.push('/login');
                },
                doForward1(){
                    this.$router.forward();
                },
                doForward2(){
                    this.$router.go(1);
                },
                doBack1(){
                    this.$router.back();
                },
                doBack2(){
                    this.$router.go(-1);
                }
            },
        watch: {
            // 监听路由跳转。
            $route(newRoute, oldRoute) {
                console.log('watch', newRoute, oldRoute)
            }
        }
        })
    </script>
  </body>
</html>

效果动图：

1.gif


导航守卫


路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供了实现导航守卫（navigation-guards）的功能。

你可以使用 router.beforeEach 注册一个全局前置守卫：


const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
    // ...
})

每个守卫方法接收三个参数：


to：即将要进入的目标路由对象（去哪里），可以使用 to.path 获取即将要进入路由地址。

from：当前导航正要离开的路由对象（从哪来），可以使用 from.path 获取正要离开的路由地址。

next：一个函数，表示继续执行下一个路由。（如果没有next，将不会进入到下一个路由）。

下面例子中实现了如下功能：


列举需要判断登录状态的 “路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面。

当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage。

样例代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="box">
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
            <router-link to="/music">music</router-link>
            <router-link to="/login">login</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        const Home = {
            template: '<div>首页</div>'
        }
        const News = {
            template: '<div>新闻</div>'
        }
        const Music = {
            template: '<div>音乐</div>'
        }
        const Login = {
            template: '<div>登录</div>'
        }
        const routes = [{
            path: '/',
            component: Home
        }, {
            path: '/home',
            component: Home
        }, {
            path: '/news',
            component: News
        }, {
            path: '/music',
            component: Music
        }, {
            path: '/login',
            component: Login
        }]
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })
        var vm = new Vue({
            el: '#box',
            data: {},
            router
        })
        // 添加全局路由守卫
        router.beforeEach((to, from, next) => {
            //创建守卫规则集合(这里表示'/news'与'/music'路径是需要权限验证的)
            const nextRoute = ['/news', '/music'];
            // 使用isLogin来模拟是否登录
            let isLogin = false;
            // let isLogin = true;
            // 判断to.path(要跳转的路径)是否是需要权限验证的
            if (nextRoute.indexOf(to.path) >= 0) {
                if (!isLogin) {
                    router.push({
                        path: '/login'
                    })
                    location.reload(); //必须要有
                }
            }
            // 已登录状态；当路由到login时，跳转至home
            if (to.path === '/login') {
                if (isLogin) {
                    router.push({
                        path: '/home'
                    });
                    location.reload();
                }
            }
            next(); //必须要有
        });
    </script>
  </body>
</html>

isLogin = false效果动图：

1.gif


我们可以看出当我们点击 news 和 music 时，因为isLogin = false，所以会自动跳转到 login 界面。


isLogin = true效果动图：

2.gif


我们可以看出当我们点击 news 和 music 时，因为isLogin = true，所以会显示相应的界面。

文章标签：
CDN
JavaScript
前端开发
数据格式
JSON
关键词：
vue路由VUE.js
VUE.js路由
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
牛哄哄的柯南8151
目录
相关文章
雨溪-yuxi
|
11天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
27 1
vue学习第四章
雨溪-yuxi
|
11天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
23 1
vue学习第九章(v-model)
雨溪-yuxi
|
11天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
24 1
vue学习第十章(组件开发）
我是快乐的嘟嘟
|
17天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
113 26
html的七十二变
|
17天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
48 8
html的七十二变
|
17天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
34 7
html的七十二变
|
17天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
37 5
雨溪-yuxi
|
16天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
雨溪-yuxi
26 3
html的七十二变
|
18天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
41 5
雨溪-yuxi
|
16天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
36 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 4
    Vue运行时报错：ERROR Failed to compile with 1 errors ，浏览器报错：Cannot GET /
  • 5
    使用webstorm来创建并且运行vue项目详细教程
  • 6
    如何在VUE中播放RTSP 实时视频，延迟要小于300毫秒？
  • 7
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 8
    vue项目使用可选链操作符编译报错问题
  • 9
    VueJS && ReactJS 如何？听听别人怎么说。
  • 10
    新建Vue项目
  • 1
    使用Vue.js构建交互式前端的技术探索
    85
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    155
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    122
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    135
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    162
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    95
  • 7
    vue3中使用动态组件
    92
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    132
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    68
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    109

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月