【前端】Vue路由

喜欢ヅ旅行 2022-03-15 12:50 307阅读 0赞

# 介绍 #

为了提高浏览器页面响应速度，在功能的开发中，应该尽量避免创建多个页面，因为浏览器在页面的跳转过程中会先删除之前的界面，然后重新渲染新加载界面上的DOM元素，这一过程中会给浏览器造成很大的压力。这样就有了SPA。

SPA全称是single page application，即单页面应用程序，在一个完成的应用或者站点中。只有一个完整的HTML页面，这个页面有一个容器，可以把需要加载的代码插到该容器中。

Vue.js路由允许我们通过不同的URL访问不同的内容，实现SPA。

# SPA实现步骤 #

1）引入对应的vue-router.js文件；

2）显示组件：`<router-view></router-view>`来渲染不同的组件；

3）创建各个组件；

4）配置信息（路由词典）；

5）创建路由表对象（语法标准）；

6）在Vue对象添加现在应用路由表对象；

7）测试：在地址栏中输入对应的不同路由地址，显示不同的组件。

# 实例展示 #

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单页面应用 路由</title>
    </head>
    <body>
        <div id="app">
            
            <router-view></router-view>
        </div>
        <script src="vue.js"></script>
        
        <script src="vue-router.js"></script>
        <script>
            // 3.创建多个组件
            var testLogin = Vue.component("login",{
                template:`
                    <div>
                        <h1>这是登录页面</h1>
                    </div>
                `
            });
    
            var testRegister= Vue.component("register",{
                template:`
                    <div>
                        <h1>这是注册页面</h1>
                    </div>
                `
            });
    
            // 4.配置路由词典
            // 语法： 请求路径 对应组件  path为空时：相当于指定页面打开时默认加载组件
            const myRoutes=[
                {path:"",component:testLogin},
                {path:"/login",component:testLogin},
                {path:"/reg",component:testRegister}
            ];
            
            // 5.创建路由对象
            const myRouter = new VueRouter({
                routes:myRoutes
            });
    
            // 6.创建Vue对象，并且指定路由对象
            new Vue({
                router:myRouter,
                el:"#app"
            })
        </script>
    </body>
    </html>

# 效果展示 #

![在这里插入图片描述][20190303163139113.gif]  
  当然，直接在地址栏中修改地址肯定是不常用的，所以，这里还提供了另一种方式：通过router-link来实现跳转。 只需在登录组件下加一行代码即可搞定。

// 3.创建多个组件
            var testLogin = Vue.component("login",{
                template:`
                    <div>
                        <h1>这是登录页面</h1>
                        <router-link to="/reg">注册</router-link>
                    </div>
                `
            });

##  效果展示 ##

![在这里插入图片描述][20190303163159699.gif]

# 结尾 #

通过路由进行跳转，可以缓解浏览器的压力，实现方式也相对较简单，所以一定要好好学习路由哦！

[20190303163139113.gif]: /images/20220315/89be74597bc744199c96e0023ebd2b69.png
[20190303163159699.gif]: /images/20220315/4b672e8e025d4873b318f410703d1524.png