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

Vue路由

2022-06-11 180
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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路由
牛哄哄的柯南8151
目录
相关文章
34789737
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
324 2
哇塞女孩
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
301 137
谢妹纸
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
813 0
我们是幸福一家人
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
357 82
rvblio6ca4cug
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
433 1
34789737
|
5月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
272 0
34789737
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
482 17
34789737
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
287 1
34789737
|
6月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
541 0
34789737
|
6月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
273 0

热门文章

最新文章

  • 1
    报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决？
  • 2
    Ant Design Vue照片墙a-upload
  • 3
    斩获开发者口碑！SnowAdmin：基于 Vue3 的高颜值后台管理系统，3 步极速上手！
  • 4
    中文代码示例之Vuejs入门教程(一)问题后续
  • 5
    [手把手系列之]Docker 部署 vue 项目(中)
  • 6
    基于Vue和SpringBoot的便利店仓库物资管理系统的设计与实现（一）
  • 7
    vue过渡动画
  • 8
    基于 vue-element-admin 升级的 Vue 3 + TypeScript + Element-Plus 版本后台管理系统正式开源
  • 9
    ECharts用法及常用配置项详解（Vue环境）
  • 10
    本地开发环境请求服务器接口跨域的问题（vue的问题）
  • 1
    Vue 3性能优化
    241
  • 2
    vue中的keep-alive问题（2）
    301
  • 3
    Vue 3
    526
  • 4
    vue3使用ts传参教程
    276
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    406
  • 6
    Vue中如何实现兄弟组件之间的通信
    324
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    457
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    271
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    272
  • 10
    vue3循环引用自已实现
    142

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    对象存储OSS快速上手——如何使用ossbrower2