• 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
  • 相关阅读:
    任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
    【图像分类】2017-MobileNetV1 CVPR
    golang 装饰器模式详解
    IBM Power PC安装sysbench 执行mysql基准测试
    软考-软件工程
    Docker安装RocketMQ详细教程
    Unity中Shader的Lambert光照的实现
    深入学习JVM底层(四):类文件结构
    thinkphp5.1整合波场trc20
    thinkphp漏洞总结
  • 原文地址:https://blog.csdn.net/qq_47200599/article/details/126679364