vue路由

最新推荐文章于 2025-12-18 14:39:46 发布

原创最新推荐文章于 2025-12-18 14:39:46 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

本文深入讲解了Vue中前端路由的概念及其实现方式。通过引入VueRouter库，创建路由实例，并配置地址与组件间的映射关系，实现单页面应用中不同URL对应的不同界面展示。

Vue路由

路由的概念

后端路由：根据不同URL地址，服务端响应不同的资源。
前端路由：针对于单页面应用来说，根据不同的地址，展示不同的界面，称之为前端路由。

怎么使用路由

引入路由的js
创建路由实例。 new VueRouter
配置地址和组件的映射关系。 routes
把路由实例挂载到vue上。 Vue实例上有个router属性
指定路由到这个地址之后，组件显示的位置<router-view></router-view>

<!DOCTYPE html>
<html>

<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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--
    
        1. 引入路由脚本，路由的脚本要放在vue脚本的后面
        -->
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <template id="login">
        <div>
            登录组件
        </div>
    </template>

    <script>
        const login = {
            template: "#login"
        }
    </script>


    <template id="register">
        <div>
            注册组件
        </div>
    </template>

    <script>
        const register = {
            template: "#register"
        }
    </script>