• 06-vue-routers.js的基本使用,路由从定向,router-link代替a标签及样式,路由嵌套,路由动画


      前端的路由,对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(单页面之中的锚链接也是#号),同时hash有个特点.HTTP请求的中不会包含hash的相关内容。

    http://127.0.0.1:8899/#/login
    1,上面地址中的#号就是hash是实现单页面跳转的主要方式。
    2,当项目引入vue-router.js后就会默认加上这个#号。
    3,vue-route也是通过监听#后面的url来实现页面跳转切换的。

    一,路由的基本使用

    <script src= "path/vue-2.4.0.js"></script>
    <!-- 1.安装 vue-router 路由模块,注意当已引入这个标签浏览器的网址栏就会加上一个hash  即#号-->
    <script src= "path/vue-router-3.0.1.js"></script>
    
    <div id="app">
    	//注意a标签的url要带#号,不然会跳转到一个不存在的地址
    	<a href = "#/login">登录</a>
    	<a href = "#/register">注册</a>
    	//4.通过router就是提供的router-view标签进行页面的渲染
    	<router-view></router-view>
    </div>
    <script>
    	//1,组件的模板对象
    	var login = {
       
    		template:"

    登录组件

    "
    } var register = { template:"

    注册组件

    "
    } // 2.创建一个路由对象,当 导入vue-router包之后,在window全局对象中,就有了一个路由的构造函数,叫做VueRouter //在new路由对象的时候,可以为构造函数,传递一个配置对象 var routerObg = new VueRouter({ // route //这个配置对象中的route表示 【路由匹配规则】的意思 routes: [ //路由匹配规则 //每个路由规则,都是一个对象,这个规则对象,身上,有两个必须的属性: //属性1是path ,表示监听哪个路由链接地址; //属性2是component ,表示,如果路由是前面匹配到的path ,则展示component属性对应的那个组件 //属性3是name这个不是必须的 //注意:component的属性值,必须是一 组件的模板对象,不能是 组件的引用名称;
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
  • 相关阅读:
    4-19 算法思路总结
    【论文阅读】SPARK:针对视觉跟踪的空间感知在线增量攻击
    centos 7 仅安装mysql client
    嵌入式Qt-控制硬件:滑动条控制RGB灯
    抽象工厂模式【设计模式】
    C++ Reference: Standard C++ Library reference: C Library: cctype: toupper
    GIS跟踪监管系统
    决策树原理及代码实现
    Python爬虫爬取豆瓣电影短评(爬虫入门,Scrapy框架,Xpath解析网站,jieba分词)
    数据库、计算机网络,操作系统刷题笔记3
  • 原文地址:https://blog.csdn.net/qq_47200599/article/details/126679364