路由的基本使用

最新推荐文章于 2022-02-20 10:57:27 发布

过客尘烟

最新推荐文章于 2022-02-20 10:57:27 发布

阅读量643

点赞数 3

分类专栏： #Vue.js基础学习文章标签： javascript 前端 node.js

本文链接：https://blog.csdn.net/qq_41309350/article/details/122563076

版权

#Vue.js基础学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

什么是路由

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue-2.4.0.js"></script>
    <script src="../../js/vue-router-3.0.1.js"></script>
</head>
<body>
    <div  id="app">
        
    <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
    <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->
        <router-view></router-view>
    </div>
    
    <script>

        var login={
            template:'<h1>登录组件</h1>'
        }
        var regir={
            template:'<h1>注册组件</h1>'
        }
        var robj=new VueRouter({
            routes:[
                {path:'/login',component:login},
                {path:'/regir',component:regir}
            ]
        })
        var vm=new Vue({
          el:'#app',
         data:{

        },
        router:robj,
        methods: {
            
        },
        })
    </script>
</body>
</html>

在这里插入图片描述

也可以通过链接来实现

    <div  id="app">
        <a href="#/login">登录</a>
        <a href="#/regir">注册</a>
    <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
    <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->
        <router-view></router-view>
    </div>

在这里插入图片描述
通过点击实现路由切换
上面的不可取，官方给了一个router-link

  <router-link to="/login">登录</router-link>
  <router-link to="/regir">注册</router-link>

过客尘烟

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由的基本使用

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

扫一扫