betway必威-betway必威官方网站
做最好的网站

必威官方网站:router安装及使用方法,router单页

vue-router单页面路由,vue-router路由

vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤:

  • 准备一个根组件  vue.extend();
  • 需要做路由的内容准备   template;
  • 准备路由 new VueRouter();
  • 关联路由   map
  • 启动路由 start(App,'#box');//第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中

github上vue-router下载地址:

关于路由跳转的简单代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <div id="box">
      <ul>
        <li>
          <a v-link="{path:'/home'}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:'news'}">我是第二个a</a>
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();

    //2.Home News 组件准备
    var Home=Vue.extend({
      template:'<h3>我是第一个a的内容页</h3>'
    });

    var News=Vue.extend({
      template:'<h3>我是第二个a的内容页</h3>'
    })

    //3.准备路由
    var router = new VueRouter();

    //4.关联

    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    })

    //5.启动路由

    router.start(App,'#box');
  </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤: 准备一个根组件...

vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤:

介绍

  • 准备一个根组件  vue.extend();
  • 需要做路由的内容准备   template;
  • 准备路由 new VueRouter();
  • 关联路由   map
  • 启动路由 start(App,'#box');//第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

github上vue-router下载地址:

本文是基于上一篇文章(Vue学习笔记进阶篇——vue-cli安装及介绍 )vue-cli脚手架工具的。

关于路由跳转的简单代码如下:

安装

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <div id="box">
      <ul>
        <li>
          <a v-link="{path:'/home'}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:'news'}">我是第二个a</a>
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();

    //2.Home News 组件准备
    var Home=Vue.extend({
      template:'<h3>我是第一个a的内容页</h3>'
    });

    var News=Vue.extend({
      template:'<h3>我是第二个a的内容页</h3>'
    })

    //3.准备路由
    var router = new VueRouter();

    //4.关联

    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    })

    //5.启动路由

    router.start(App,'#box');
  </script>
</html>

在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里,然后使用以下命令进行安装:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

npm install vue-router --save

您可能感兴趣的文章:

  • Vue.js路由vue-router使用方法详解
  • Vue.js路由组件vue-router使用方法详解
  • vue-router路由懒加载和权限控制详解
  • vue router2.0二级路由的简单使用
  • vue router路由嵌套不显示问题的解决方法
  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后, 可以查看package.json文件,你会发现多了"vue-router": "^2.7.0"的配置。如下:

 "dependencies": {
  "vue": "^2.3.3",
  "vue-router": "^2.7.0"
 },

使用

通过以上步骤,我们已经安装好了vue-router,但是在vue-cli中我们如何使用呢?
首先,我们需要在main.js文件中导入并注册vue-router:

//ES6语法导入
import VueRouter from 'vue-router'
//注册
Vue.use(VueRouter)

然后便是实例化:

const router = new VueRouter({
 mode: 'history',
 routes:[
  {path: '/', component:DemoHome},
  {path: '/about', component:DemoAbout},
  {path: '/contact', component:DemoContact}
 ]
})

path: 是路由的路径。

component: 是该路由需要渲染的组件。

上面代码中的DemoHome, DemoAbout, DemoContact都是单文件组件,所以我们同样需要创建上面三个组件,并导入到当前文件。这三个组件我们只是作为示例来使用,所以比较简单,代码分别如下:

DemoHome.vue:

<template>
 <div id="home">
  <h2>this is home</h2>
 </div>
</template>

<script>
 export default({
  name:'home'
 })
</script>

<style scoped>
 #home{
  width: 100%;
  height: 500px;
  background-color: khaki;
 }
</style>

DemoAbout.vue:

<template>
 <div id="about">
  <h2>this is about</h2>
 </div>
</template>

<script>
 export default({
  name:'about'
 })
</script>

<style scoped>
#about{
 width: 100%;
 height: 500px;
 background-color: antiquewhite;
}
</style>

DemoContact.vue:

本文由betway必威发布于网页设计,转载请注明出处:必威官方网站:router安装及使用方法,router单页

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。