Vue-路由1 路由的基本使用

最新推荐文章于 2025-08-19 00:00:00 发布

原创最新推荐文章于 2025-08-19 00:00:00 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了Vue中前端路由的概念及其实现原理，通过代码示例详细介绍了如何使用vue-router进行页面切换，包括路由的基本使用、组件切换以及重定向功能。

Vue-路由1 路由的基本使用

一、概念

问：前端路由是什么？
答：在单页面应用中，前端路由是用来实现不同页面的切换，在单个页面中展示不同的内容（组件）。实现原理：通过url中的hash（#号）来实现的，http请求中不会包含hash的内容。

二、代码示例

注意：

导入vue-router：导入vue-router.js前，先导入vue.js，因为vue-router.js依赖于vue.js
路由实例：创建路由实例时，给routes赋值，routes是一个数组，数组中的每个项是一个对象，对象中有两个属性，path和component，path表示要监听的url地址，component表示path对应的组件，并且component只能是组件模板，而不是组件，不能为字符串
注册路由：在Vue实例中要注册路由，router: 路由实例
a标签跳转路由：用a标签跳转路径时，要在href的路径前加 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
<!--    1.导入vue-router.js后，会在vue中注册一个VueRouter-->
<!--    注意：导入vue-router.js前，先导入vue.js，因为vue-router.js依赖于vue.js-->
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        6.router-link是vue-router提供的元素，根据to属性为routers[] 中的path路径，从而找到对应的组件-->
<!--        <router-link> 默认会被渲染成一个 `<a>` 标签-->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

<!--        7.通过a标签切换路由-->
<!--        注意：需要在href中加  #  -->
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>

<!--        5.router-view是vue-router提供的元素，router对应的组件会显示到改元素中-->
        <router-view></router-view>
    </div>

<script>
    // 2.创建组件模板
    // 2.1 登录组件模板
    const login = { template: '<h1>登录组件</h1>' }
    // 2.2 注册组件模板
    const register = { template: '<h1>注册组件</h1>' }

    // 3.创建VueRouter实例，定义路由
    // 注意：路由通过routes: []定义，这是一个数组，数组中的元素是对象，每个对象有两个属性：path和component
    // path： 代表监听的url地址
    // component： 代表path地址对应的组件模板，注意：是组件模板，而不是组件，不能是字符串
    const router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router    // 4.将路由交给Vue实例，vm会监听url的变化，根据url找到对应的组件，然后渲染到页面中
    })
</script>
</body>
</html>

三、重定向

与前面代码一样，只是在路由实例中的routes中添加了一个对象{path: ‘/’, redirect: ‘/login’}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
<!--    1.导入vue-router.js后，会在vue中注册一个VueRouter-->
<!--    注意：导入vue-router.js前，先导入vue.js，因为vue-router.js依赖于vue.js-->
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        6.router-link是vue-router提供的元素，根据to属性为routers[] 中的path路径，从而找到对应的组件-->
<!--        <router-link> 默认会被渲染成一个 `<a>` 标签-->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

<!--        7.通过a标签切换路由-->
<!--        注意：需要在href中加  #  -->
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>

<!--        5.router-view是vue-router提供的元素，router对应的组件会显示到改元素中-->
        <router-view></router-view>
    </div>

<script>
    // 2.创建组件模板
    // 2.1 登录组件模板
    const login = { template: '<h1>登录组件</h1>' }
    // 2.2 注册组件模板
    const register = { template: '<h1>注册组件</h1>' }

    // 3.创建VueRouter实例，定义路由
    // 注意：路由通过routes: []定义，这是一个数组，数组中的元素是对象，每个对象有两个属性：path和component
    // path： 代表监听的url地址
    // component： 代表path地址对应的组件模板，注意：是组件模板，而不是组件，不能是字符串
    const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},        // 路由的重定向！！！
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router    // 4.将路由交给Vue实例，vm会监听url的变化，根据url找到对应的组件，然后渲染到页面中
    })
</script>
</body>
</html>