Vue-router的基本使用

Vue-router的基本使用

相关Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.4.0.js"></script>
    <script src="../js/vue-resource-1.3.4.js"></script>
    <!--1.引入vue-router-->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <!--router-view,提供的用来当做占位符的 router中的规则会展现到这个里面去-->
    <router-view></router-view>
</div>

<script>

    var login={
        template:'<h1>这个是登录组件</h1>'
    }
    var register={
        template:'<h1>注册组件</h1>'
    }

    //在new
    var routerObj = new VueRouter({
        //这个配置对象中的route表示路由匹配规则的意思
        //1.path,表示监听,路由的连接地址
        //2.component 表示路由匹配到的path
        routes:[
            //注意:component属性值,必须是一个组件模板对象,不能是引用名称
            {path:'/login',component:login},
            {path:'/register',component:register}

        ]
    })

    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {

        },
        router:routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象

    })

</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术专栏

Python3入门与实践(五):IO 与 异常

13640
来自专栏coding

vue.js路由实例讲解

14520
来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

60430
来自专栏owent

Webpack+vue+boostrap+ejs构建Web版GM工具

Web前端的组件技术刷新真的是日新月异,前段时间看到很多童鞋分享了webpack的使用,刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式,做模...

60420
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

24590
来自专栏听雨堂

web中的水晶报表 "出现通信错误。将停止打印"

被这个问题快折腾死,死活都找不到原因,找了一堆解答,无外乎这几种情况,但都不管用 在Page_Init中绑定数据。无效。 activex控件的版本,我试过10....

20890
来自专栏郭少华

(第四季)Vue实例和内置组件

概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vu...

9310
来自专栏Spring相关

Vue路由router-link的使用

16020
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

247100
来自专栏IT杂记

Windows查看文件句柄

图形界面方式     打开任务管理器 ?      2. 性能tab,点击链接打开资源监视器; ?     3. 现在cpu tab,关联的句柄后面的输入框可以...

53890

扫码关注云+社区

领取腾讯云代金券