zoukankan      html  css  js  c++  java
  • vue.js利用vue.router创建前端路由

    node.js方式:

    利用node.js安装vue-router模块

    cnpm install vue-router

    安装完成后我们引入这个模板!

    下载vue-router利用script引入方式:

    我们也可以把vue-router下载下来

    附上地址:https://unpkg.com/vue-router/dist/vue-router.js

    在html里用<script>加载!

    我们就以script为例

    首先我们要引入vue.js在引入vue-router.js

    vue-router.js依赖于vue.js

    HTML:

    <script type="text/javascript" src="vue.js></script>
    <script type="text/javascript" src="vue-router.js></script>

    <div id="app">

    <h1>Hello router.js!</h1>

    <!-- 使用 router-link 组件来导航. -->

    <!-- 通过传入 `to` 属性指定链接. -->

    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

    <router-link to="/router1">路由一</router-link>   <!------当我们点击这标签,它会触发router1路由,然后会在router-view渲染出我们定义的组件,我们地址栏也会多出/router1-->

    <router-link to="/router2">路由二</router-link>

     <router-view></router-view>  //  <-----这个是 我们路由要渲染地方,如果我们没有router-view这个标签,我们的路由就无法渲染到页面-->

    </div>      

    JS:

    第一步定义组件:

    var router1 = {template:<div>我是路由组件一号</div>}

    var router2 = {template:<div>我是路由组件二号</div>}

    第二步定义路由:

    var routers = [

     {path:"/router1",component:router1},

    {path:"/router2",component:router2}

    ]

    第三步创建路由的实例

    var router = new VueRouter({

      routers                                             //routers=routers

     })

    第四步创建和挂载实例

    var vm = new Vue({

    router

    }).$mount("#app")

    <!---最后附上router.js完整的教程地址---->

    附上地址: http://router.vuejs.org/zh-cn/essentials/getting-started.html

  • 相关阅读:
    在ConcurrentModificationException异常上的联想
    记录一下自己爬虎牙LOL主播的爬虫思路
    ajax解决跨域问题
    解决多线程下数据库操作问题
    浅谈时间复杂度
    想一下,最大公约数怎么求
    IO流与IO缓冲
    循环移位
    3Sum探讨(Java)
    Two Sum(两个数的相加)
  • 原文地址:https://www.cnblogs.com/complete94/p/6723243.html
Copyright © 2011-2022 走看看