对于Vue路由你知道多少_ruoyi-vue-plus动态路由

路由

再讲Vue路由之前先简单概括一下路由的概念

• 后端路由：URL地址与服务器资源的匹配关系
• 前端路由：根据不同的用户事件，显示不同的页面内容，主要用于实现SPA(单页面应用)

Hash方法定义路由

首先让我们通过一个简单的案例来了解路由

1. 首先定义三个锚点来对应响应的页面

   <div id="app">
       <ul>
           <li><a href="#/pageA">页面一</a></li>
           <li><a href="#/pageB">页面二</a></li>
           <li><a href="#/pageC">页面三</a></li>
       </ul>
          <!--自定义组件 :is代表跳转自定义的组件  -->
       <component :is="component_name"></component>
   </div>
   1
   2
   3
   4
   5
   6
   7
   8
   9

2. 创建局部组件并在Vue实例中应用

   let pageA = {
               template: "<div>页面一内容</div>"
           }
           let pageB = {
               template: "<div>页面二内容</div>"
           }
           let pageC = {
               template: "<div>页面三内容</div>"
           }
           
           let app = new Vue({
               el: '#app',
               data: {
                   component_name: pageA
               },
               components: {
                   pageA,
                   pageB,
                   pageC
               }
           })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

3. 通过hashchange监听页面锚点的改变

 window.addEventListener('hashchange', () => {
            let hash = window.location.hash.slice(1)
            switch (hash) {
                case "/pageA":
                    app.component_name = 'pageA';
                    break;
                case "/pageB":
                    app.component_name = "pageB";
                    break;
                case "/pageC":
                    app.component_name = "pageC"
                    break

            }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果

官方路由

当然Vue官方为我们提供了vue-router库，官方文档

接下来让我们使用vue-router来修改上面的案例

1. 在head中引入

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

2. 创建组件

   const componentA = {
       template: "<div>导航一内容</div>"
   }
   const componentB = {
       template: "<div>导航二内容</div>"
   }
   const componentC = {
       template: "<div>导航三内容</div>"
   }
   const route = {
        { path: "/a", component: componentA },
        { path: "/b", component: componentB },
        { path: "/c", component: componentC }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

3. 创建VueRouter实例，并引入组件

   const router = new VueRouter({
       routes         
   })
   1
   2
   3

4. 在 Vue实例中引入

   let app = new Vue({
       el: '#app',
       data: {},
       router
   })
   1
   2
   3
   4
   5

5. html

   1. 使用router-link组件来导航
   2. 通过传入to属性指定连接
   3. <router-link> 默认会被渲染成一个 <a> 标签
   4. 使用router-view定义组件出口

<div id="app">
    <router-link to="/a">导航一</router-link>
    <router-link to="/b">导航二</router-link>
    <router-link to="/c">导航三</router-link>
    <router-view></router-view>
</div>
1
2
3
4
5
6

效果：