Router前端路由的使用

最新推荐文章于 2024-05-17 04:50:16 发布

^一个人^

最新推荐文章于 2024-05-17 04:50:16 发布

阅读量1k

点赞数

分类专栏： Vue 学习文章标签：前端路由router

本文链接：https://blog.csdn.net/weixin_44441419/article/details/86378974

版权

@[TOC]Vue 中路由 Router 的使用

什么是路由

后端路由：对于普通的网站，所有的超链接都是 URL 地址，所有的 URL 地址都对应服务器上对应的资源；
前端路由：对于单页面应用程序来说，主要通过 URL 中的 hash（#号）来实现不同页面之间的切换，同时，hash 有一个特点：HTTP 请求中不会包含 hash 相关内容；所以，单页面应用程序中的页面跳转主要用 hash 实现；
在单页面应用程序中，这种通过 hash 改变来切换页面方式，称作前端路由（区别于后端路由）。

在 Vue 中使用 Router

引用 vue-router.js 这个包（可在网上直接下载 vue-router包）；
创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有一个路由的构造函数 VueRouter（可以直接 new 创建）；
使用 VueRouter 实例下的 routes 属性指定路由匹配规则（这时候要创建组件）；

每个路由规则，都是一个对象，这个规则对象身上有两个必须的属性：
属性1：path 表示监听哪个路由链接地址；
属性2：component 表示如果路由是前面匹配到的 path，则展示 component 属性对应的组件；
注意：component 的属性值必须是一个组件模板对象，不能是组件的引用名称。

将路由规则对象，注册到 Vue 实例，用来监听 URL 变化，然后展示对应的组件；
要想在页面显示组件，在 html 中还要写上 vue-router 提供的 router-view 元素，这是专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到 router-view 中（可认为是个占位符）。

代码示例：路由 router 的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='vue.js'></script>
    <!--1. 安装 vue-router 路由模块（注意顺序）-->
    <script src="vue-router.js"></script>
       <style>
    body{
    
        font-size:36px;
        color:#fff;
    }
    .router-link-active,.myactive{
        /*高亮显示*/
        color:red;
        font-weight:800;
        font-size:50px;
    }
    .v-enter,.v-leave-to{
       /*为路由添加动画*/
        opacity:0;
        transform:translateX(100px)
    }
    .v-enter-active,.v-leave-active{
    
        transition:all .6s;
    }
    </style>
</head>
<body>
    <div id="app">
        <!-- router-link 默认渲染为一个 a 标签，可通过 tag 属性更改渲染的标签 -->
        <!-- <router-link to='/login?id=1' tag='span'>login</router-link> -->
        <router-link to='/login' tag='span'>login</router-link>
        <router-link to='/register' tag='span'>register</router-link>
        <router-view></router-view><!-- 5.占位符、容器 -->
    </div>
</body>
</html>

<script>
    //3.创建组件模板对象
    //可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
    var login = {
   
        template:'<h1>login component</h1>',
        }
    }
    var regist

最低0.47元/天解锁文章

^一个人^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Router前端路由的使用

@[TOC]Vue 中路由 Router 的使用什么是路由后端路由：对于普通的网站，所有的超链接都是 URL 地址，所有的 URL 地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过 URL 中的 hash（#号）来实现不同页面之间的切换，同时，hash 有一个特点：HTTP 请求中不会包含 hash 相关内容；所以，单页面应用程序中的页面跳转主要用 hash 实现...
复制链接

扫一扫