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

本文分享自华为云社区《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>

可以看到什么都没有：

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

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

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.效果与单页面代码：

以上我们就大工告成~

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

上面的完整代码：

<!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，那就给根目录重定向。

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

修改路由规则如下：

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

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

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

四.嵌套路由：

功能如下：

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>`
        }

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

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

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.效果与单页面代码：

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

完整代码：

<!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>'
}

看效果：

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

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>'
                }

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

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

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 就不行了：

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

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}) }
        ]
     })

效果：

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

当前完整代码：

<!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 表示要传递的参数，看下面是一样的效果：

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

七.编程式导航：

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.看效果：

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

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)
                    }
            }
        }

效果：

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

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

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

一.速识概念：

1. 后端路由：

2. 前端路由：

3.Vue Router：

二.基本使用:

前提：

1.引入相关的文件：

2.添加路由链接：

3.添加路由填充位：

4.定义路由组件：

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

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

7.效果与单页面代码：

三.路由重定向：

四.嵌套路由：

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

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

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

4.配置路由规则：

5.效果与单页面代码：

五. 动态路由匹配：

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

2.路由组件传参：

2.1 当 props 为布尔类型：

2.2 当 props 为对象类型：

2.3 当 props 为函数类型：

六.Vue-Router 命名路由：

七.编程式导航：

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

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

常见问题FAQ

掘金(华为云开发者社区) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

一.速识概念：

1. 后端路由：

2. 前端路由：

3.Vue Router：

二.基本使用:

前提：

1.引入相关的文件：

2.添加路由链接：

3.添加路由填充位：

4.定义路由组件：

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

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

7.效果与单页面代码：

三.路由重定向：

四.嵌套路由：

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

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

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

4.配置路由规则：

5.效果与单页面代码：

五. 动态路由匹配：

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

2.路由组件传参：

2.1 当 props 为布尔类型：

2.2 当 props 为对象类型：

2.3 当 props 为函数类型：

六.Vue-Router 命名路由：

七.编程式导航：

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

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

常见问题FAQ

掘金(华为云开发者社区) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式