一文你带快速认识 Vue-Router 路由-低调大师

一文你带快速认识 Vue-Router 路由

2021-06-10 497

摘要：VueRouter 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的用于 SPA 应用程序的开发。

本文分享自华为云社区《Vue-Router路由快速了解与应用》，原文作者：北极光之夜。

一.速识概念：

1. 后端路由：

1.根据不同的用户 URL 请求,返回不同的内容,本质上是 URL 请求地址与服务器资源之间的对应关系。

2.但是呢，后端渲染存在性能问题。

2. 前端路由：

3.所以出现了 Ajax 前编渲染 ，前端渲染能提高性能，但是不支持浏览器的前进后退操作。

4.这时又出现了 SPA (Single Page Application)单页面应用程序，整个网站只有一个页面，内容的变化通过 Ajax 局部更新实现、同时支持浏览器地址栏的前进和后退操作。

5.SPA 实现原理之一就是基于 URL 地址的 hash (hash 的变化会导致浏览器记录访问历史的变化、但是 hash 的变化不会触发新的 URL 请求) 。在实现 SPA 过程中，其中最核心的技术点就是前端路由。

6.前端路由就是根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事件处理函数之间的对应关系。

3.Vue Router：

这是官方使用文档链接：
router.vuejs.org/zh/guide/#j…

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的用于 SPA 应用程序的开发。

它的功能如下：

1.支持 HTML5 历史模式或 hash 模式。2.支持嵌套路由。3.支持路由参数。4.支持编程式路由。5.支持命名路由。

二.基本使用:

前提：

下面将会以一个 HTML 单页面演示 Vue Router 的基本使用步骤。在 vue 项目里也是一样的原理。当前单页面基本代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">


    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data: {}
        })
    </script>
</body>
</html>

可以看到什么都没有：

下面开始使用的具体步骤：

1.引入相关的文件：

单页面肯定得先导入 vue 文件与 vue-router 文件，这样我们才能够使用路由。

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

2.添加路由链接：

以下是一个 vue 提供的标签，默认会被渲染为 a 标签。其中有一个 to 属性，这个 to 属性会被渲染为 href 属性，默认值被渲染为 # 开头的 hash 地址。简单来说就是当用户点击不同时跳转不同内容，而这个标签就是用户要点击的东西，相当于 a 标签嘛。

<router-link to="/..." >...</router-link>

给我们的单页面上加一个 page1 和一个 page2 的链接：

<div id="app">
       <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
    </div

3.添加路由填充位：

下面这个标签叫路由填充位，就是说未来通过我们的路由规则匹配到的组件，将会被渲染到 router-view 所在位置。简单来说，就是用户点击路由链接，那得跳转内容吧，我们知道的是肯定不是整个页面都跳转，只是页面内相关的局部发生内容改变，这个局部就是 router-view 所在显示的区域。

<router-view></router-view>

给我们的页面添加：

 <div id="app">
        <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
       <router-view></router-view>
    </div>

4.定义路由组件：

既然要显示不同的内容，那肯定是用一个组件保存一份内容。下面我们给单页面定义 page1，page2 这两个组件。

<script>
        const Page1 = {
            template: '<h1>我是北极光之夜1号</h1>'
        }
        const Page2 = {
            template: '<h1>我是北极光之夜2号</h1>'
        }
        const app = new Vue({
            el:"#app",
            data: {}
        })
    </script>

5.配置路由规则井创建路由实例：

routes 是路由规则数组。每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性，path 表示当前路由规则匹配的 hash 地址，component 表示当前路由规则对应要展示的组件。简单来说就是你点击那个链接对应的地址要对应的是哪个内容的组件。path 跟 router-link 标签里的地址要一样，别写错了。

const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 }
            ]
        })

6.把路由挂载到 Vue 根实例中：

为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上。

const app = new Vue({
            el:"#app",
            data: {},
            router
        })

7.效果与单页面代码：

以上我们就大工告成~

上面的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
       <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
       <router-view></router-view>
    </div>
    <script>
        const Page1 = {
            template: '<h1>我是北极光之夜1号</h1>'
        }
        const Page2 = {
            template: '<h1>我是北极光之夜2号</h1>'
        }
        const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 }
            ]
        })
        const app = new Vue({
            el:"#app",
            data: {},
            router
        })
    </script>
</body>
</html>

三.路由重定向：

路由重定向指的是用户在访问地址 A 的时候,强制用户跳转到地址 B，从而展示特定的组件页面。通过路由规则的 redirect 属性,指定一个新的路由地址，可以很方便地设置路由的重定向。

{path:'/..',redirect: '/...'}

其中 path 表示重定向的原地址，redirect 表示新地址。

比如第二大点的案例中，刚打开的页面如下，在根目录，但我们想一进入就显示 page1，那就给根目录重定向。

修改路由规则如下：

const router = new VueRouter({
            routes: [             
                {path:'/page1',component:Page1 },
                {path:'/page2',component:Page2 },
                {path:'/',redirect:'/page1'}
            ]
        })

看效果，我没点击就默认进入 page1 了：

四.嵌套路由：

功能如下：

1. 点击父级路由链接显示模板内容。

2. 模板内容中又有子级路由链接。

3. 点击子级路由链接显示子级模板内容。

比如我们改进第二大点的案例，当点击 page2 显示 page2 内容时，page2 里又有两个子路由连接，star 和 moon，当点击其中一个链接时又能显示对应的 star 或 moon 内容。

1.首先给 page2 组件添加两个子路由链接：

const Page2 = {
            template: `
                 <div>
                 <h1>我是北极光之夜2号</h1>
                 <hr/>
                 <router-link to="/page2/star">Star</router-link>
                 <router-link to="/page2/moon">Moon</router-link>
                 <hr/>
                 </div>`
        }

此时页面也把显示子路由链接出来了：

2.给两个子路由链接添加路由填充位：

const Page2 = {
const Page2 = {
            template: `
                 <div>
                 <h1>我是北极光之夜2号</h1>
                 <hr/>
                 <router-link to="/page2/star">Star</router-link>
                 <router-link to="/page2/moon">Moon</router-link>
                 <hr/>
                 <router-view></router-view>
                 </div>`
        }

3.设置两个子组件 star 与 moon 的内容：

 const Star = {
            template: '<h2>我是北极光之夜2号下的star</h2>'
        }
        const Moon = {
            template: '<h2>我是北极光之夜2号下的Moon</h2>'
        }

4.配置路由规则：

page2 的规则除了 path 和 component 属性外，再添加一个 children 属性，这个属性以数组表示，数组里存放其子路由的规则，其规则也是一样的，套娃套娃。

const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {
                    path:'/page2',
                    component:Page2, 
                    children: [
                        {path: '/page2/star',component:Star},
                        {path: '/page2/moon',component:Moon}
                    ]
                }
            ]
        })

5.效果与单页面代码：

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
       <router-link to="/page1">Page1</router-link>
       <router-link to="/page2">Page2</router-link>
       <router-view></router-view>
    </div>
    <script>
        const Page1 = {
            template: '<h1>我是北极光之夜1号</h1>'
        }
        const Page2 = {
            template: `
                 <div>
                 <h1>我是北极光之夜2号</h1>
                 <hr/>
                 <router-link to="/page2/star">Star</router-link>
                 <router-link to="/page2/moon">Moon</router-link>
                 <hr/>
                 <router-view></router-view>
                 </div>`
        }
        const Star = {
            template: '<h2>我是北极光之夜2号下的star</h2>'
        }
        const Moon = {
            template: '<h2>我是北极光之夜2号下的Moon</h2>'
        }
        const router = new VueRouter({
            routes: [
                {path:'/page1',component:Page1 },
                {
                    path:'/page2',
                    component:Page2, 
                    children: [
                        {path: '/page2/star',component:Star},
                        {path: '/page2/moon',component:Moon}
                    ]
                }
            ]
        })
        const app = new Vue({
            el:"#app",
            data: {},
            router
        })
    </script>
</body>
</html>

五. 动态路由匹配：

1.动态匹配路由基本使用：

如果某些路由规则的一部分是一样的，只有另一部分是动态变化的，那我们可以把这些动态变化的部分形成路由参数，这些参数就叫做动态路由匹配。

简单来说，你先看下面这些路由链接，它们都有/page/，就是后面不一样：

<router-link to="/page/1">Page1</router-link>
   <router-link to="/page/2">Page2</router-link>
   <router-link to="/page/3">Page3</router-link>

那该咋配置路由呢？这样吗：

const router = new VueRouter({
            routes: [
                {path:'/page/1',component:Page},
                {path:'/page/2',component:Page},
                {path:'/page/3',component:Page}
            ]
        })

这样万一有很多一个个写岂不是太麻烦了，所以引入参数，在动态改变的部分定义为参数，参数前面有一个冒号,那上面可简写成如下，动态部分设为参数 ：id 。

const router = new VueRouter({
            routes: [
                {path:'/page/:id',component:Page },
            ]
        })

在组件可以通过以下语法获取当前路由的参数：

$router.params.参数名称

好，再次修改第二大点的案例完成动态路由匹配：

1.定义路由链接：

<div id="app">
   <router-link to="/page/1">Page1</router-link>
   <router-link to="/page/2">Page2</router-link>
   <router-link to="/page/3">Page3</router-link>
   <router-view></router-view>
   </div>

2.动态配置路由，参数 id：

const router = new VueRouter({
    routes: [
        {path:'/page/:id',component:Page1 },
    ]
})

3.设置组件内容，并显示当前路由的参数：

const Page1 = {
    template: '<h1>我是北极光之夜1号,当前id为：{{$route.params.id}}</h1>'
}

看效果：

2.路由组件传参：

上面的 $route 与对应路由形成高度耦合，不够灵活啊，所以可以使用 props 将组件和路由解耦。简单来说，好像也没什么说的，直接看下面实例就能理解了。

2.1 当 props 为布尔类型：

const router = new VueRouter({
            routes: [
 // 设置props，如果props为true，router.params会被设置为组件属性
                {path:'/page/:id',component:Page1,props: true },
            ]
        })  
              
        const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数id和使用它
                    props: ['id'],
                    template: '<h1>我是北极光之夜1号,当前id为：{{id}}</h1>'
                }

能达到一样的效果，且更灵活了，上面记得反过来，先定义组件才配置路由规则，只是为了直观才这样写：

2.2 当 props 为对象类型：

const Page1 = {
        // 这时就通过props接收参数，快速简洁的接收参数对象 并显示
                props: ['name','age'],
                template: `<h1>我是北极光之夜1号,当前id为：{{id}}
                            <hr/>
                           姓名为：{{name}} ，年龄为：{{age}} </h1>`
                }
             const router = new VueRouter({
                routes: [
            // props为一个参数对象，它会原样设置为组件属性，
            // 里面的自定义的参数都能传过去，但是id传不了了
                    {path:'/page/:id',component:Page1 , props: {name:'auroras',age: 18} }
                ]
             })

效果，对象 props 对象里的能获取，id 就不行了：

2.3 当 props 为函数类型：

这个就什么都能获取。

const Page1 = {
// 这时就通过props接收参数，快速简洁的接收参数
        props: ['name','age','id'],
        template: `<h1>我是北极光之夜1号,当前id为：{{id}}
                    <hr/>
                   姓名为：{{name}} ，年龄为：{{age}} </h1>`
        }
     const router = new VueRouter({
        routes: [
    // props为函数，这个对象接收router对象为自己形参，
    // 里面的自定义的参数和id都能传过去
            {path:'/page/:id',
            component:Page1 , 
            props: router => ({id: router.params.id,name:'auroras',age: 18}) }
        ]
     })

效果：

当前完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/page/1">Page1</router-link>
        <router-link to="/page/2">Page2</router-link>
        <router-link to="/page/3">Page3</router-link>
        <router-view></router-view>
        </div>   
         <script>
            const Page1 = {
        // 这时就通过props接收参数，快速简洁的接收参数对象 
                props: ['name','age','id'],
                template: `<h1>我是北极光之夜1号,当前id为：{{id}}
                            <hr/>
                           姓名为：{{name}} ，年龄为：{{age}} </h1>`
                }
             const router = new VueRouter({
                routes: [
            // props为函数，这个对象接收router对象为自己形参，
            // 里面的自定义的参数和id都能传过去
                    {path:'/page/:id',
                    component:Page1 , 
                    props: router => ({id: router.params.id,name:'auroras',age: 18}) }
                ]
             })  
        const app = new Vue({
            el:"#app",
            data: {},
            router
        })
    </script>
</body>
</html>

六.Vue-Router 命名路由：

为更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

继续改进上面的案例讲解用法：

1.首先给路由规则加一个 name 属性，这个就是别名：

const router = new VueRouter({
    routes: [
        {
        name: 'user',
        path:'/page/:id',
        component:Page1 , 
        props: router => ({id: router.params.id,name:'auroras',age: 18}) }
    ]
 })

2.在路由链接中使用：

<div id="app">
    <router-link :to="{name:'user',params: {id: 1}}">Page1</router-link>
    <router-link to="/page/2">Page2</router-link>
    <router-link to="/page/3">Page3</router-link>
    <router-view></router-view>
    </div>

我们把第一个路由链接改进，to 前面加上冒号，其中 name 表示匹配的是哪个路由规则，params 表示要传递的参数，看下面是一样的效果：

七.编程式导航：

1. 声明式导航：首先声明式导航是指用户通过点击链接完成导航的方式，比如点击 a 标签或者路由链接这些完成的跳转。

2. 编程式导航：编程式导航就是说跳转是因为我点击它，它不是链接，但是它在 JavaScript 里调用了某个 API 也实现了跳转。

3. 常用的编程式导航 API 如下：

this.$router.push('要跳转的hash地址')
this.$router.go(n)

push 里直接放要跳转的哈希地址，go 方法实现前进和后退，n 代表数组，若 n 为 1 代表在历史记录中前进一位，-1 代表在历史记录中后退一位。

1. this.$router.push(’ ')：

重写一个案例，有 page1、page2、page3 三个路由链接，而在 page3 里有一个按钮，这个按钮的作用是点击后返回显示 page1 的内容。这个按钮可不是声明式导航里的链接，就是一个按钮。

1.定义普通的路由链接：

 <div id="app">
    <router-link :to="/page/1">Page1</router-link>
    <router-link to="/page/2">Page2</router-link>
    <router-link to="/page/3">Page3</router-link>
    <router-view></router-view>
    </div>

2.定义 3 个组件内容，其中给 page3 组件里放一个按钮，并绑定点击事件，在事件里通过 API 导航到 page1：

const Page1 = {
    template: `<h1>我是北极光之夜1号</h1>`
}
const Page2 = {
    template: `<h1>我是北极光之夜2号</h1>`
}
const Page3 = {
    template: `<div>
            <h1>我是北极光之夜3号</h1>
            <button @click="goPage1">返回page1</button>
               </div>`,
    methods: {
        goPage1(){
            this.$router.push('/page/1')
        }
    },
    
}

3.路由规则：

const router = new VueRouter({
                routes: [
                    {path:'/page/1',component: Page1},
                    {path:'/page/2',component: Page2},
                    {path:'/page/3',component: Page3}
                ]
             })

4.看效果：

5.完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/page/1">Page1</router-link>
        <router-link to="/page/2">Page2</router-link>
        <router-link to="/page/3">Page3</router-link>
        <router-view></router-view>
    </div>   
         <script>
            const Page1 = {
                template: `<h1>我是北极光之夜1号</h1>`
            }
            const Page2 = {
                template: `<h1>我是北极光之夜2号</h1>`
            }
            const Page3 = {
                template: `<div>
                        <h1>我是北极光之夜3号</h1>
                        <button @click="goPage1">返回page1</button>
                           </div>`,
                methods: {
                    goPage1(){
                        this.$router.push('/page/1')
                    }
                },
                
            }
             const router = new VueRouter({
                routes: [
                    {path:'/page/1',component: Page1},
                    {path:'/page/2',component: Page2},
                    {path:'/page/3',component: Page3}
                ]
             })  


        const app = new Vue({
            el:"#app",
            data: {},
            router
        })
    </script>
</body>
</html>

不止 href 路径，还可以有以下操作：

//字符串形式（路径的名称）
router.push('/page1')
//对象的形式
router.push({path: '/page1'})
//也可以传递参数，命名的路由
router.push({name: '/page1',parmas:{id: 1}})
//带查询参数，变成  /page1?p=id 
//这个挺实用的，比如在某些音乐网页，点击歌单后要导航到另一个该歌单详细界面，此时要带id，详细界面靠此id重新发送请求，请求详细信息
router.push({parh: '/page1',query:{p: 'id' }})

2. this.$router.go(n)：

改进第 1 小点的案例，当我 page3 跳到 page1 时，page1 里又有一个返回的按钮。我们把 n 设置为-1，他就会在历史记录中后退一位，后退一位就是 page3.修改 page1 组件内容：

  const Page1 = {
                template: `<div>
                        <h1>我是北极光之夜1号</h1>
                        <button @click="goBack">返回</button>
                           </div>`,
                  methods: {
                    goBack(){
                        this.$router.go(-1)
                    }
            }
        }

效果：

点击关注，第一时间了解华为云新鲜技术~

微信关注我们

原文链接：https://blog.51cto.com/u_15214399/2889541

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

全网首发！四招解锁HarmonyOS开发者成长计划，免费资料拿到手软

为了让大家快人一步，迅速从入门小白晋级技术大神，我们集结HarmonyOS技术专家，为应用开发者量身打造了一个路径最短、可实操性最强的学习路线。包括学习HarmonyOS最新特性和界面开发、熟悉HarmonyOS系统框架，以及开发HarmonyOS应用。我们收集了工具、教程、详解视频等可实操的学习资料，可以帮你在学习应用开发中事半功倍。 ![3322.png](https://s2.51cto.com/images/20210610/1623308771225739.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=) ## Step1 初学乍练（3-5周，每周4-6小时） **目标** 掌握HarmonyOS应用开发编程语言，了解HarmonyOS系统概述并搭建HUAWEI DevEco Studio集成开发环境。 **路径** 在学习HarmonyOS之前，大家需...

2021-06-10

606

1.2 快速上手本小节主要讲解如何快速上手开发uni-app的应用：可以使用HbuilderX，或者通过vue-cli命令行。 1.2.1 HbuilderX开发工具可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。开始之前，开发者需先下载安装如下工具： HBuilderX：官方IDE下载地址 https://www.dcloud.io/hbuilderx.html HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，如图1-4，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。 HbuilderX是一个绿色的开发包，下载后，解压缩，在文件夹中直接点击即可使用该工具。如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。 1.2.2 通过 HBuilderX 可视化界面创建uni-app uni-app支持通过可视化界面、vue-cli命令行两种方式快速创建项目。在点击工具栏里的文件 -> 新建...

2021-06-10

668

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Oracle

Oracle Database，又名Oracle RDBMS，或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是目前世界上流行的关系数据库管理系统，系统可移植性好、使用方便、功能强，适用于各类大、中、小、微机环境。它是一种高效率、可靠性好的、适应高吞吐量的数据库方案。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。