vue-router单页面路由_vue.js_脚本之家

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

  • Vue2简单入门
  • Vue.js再入门
  • Vue.js使用vue-router构建单页应用
  • Vue.js状态管理工具Vuex快速上手

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

传统的网页应用

github上vue-router下载地址:

单页应用

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

单页应用的优缺点

每种技术都有其利弊,单页应用也是如此。

  • 无刷新体验,这个应该是最显著的有点,由于路由分发直接在浏览器端完成,页面是不刷新,对用户的响应非常及时,因此提升了用户体验;
  • 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;
  • API
    共享
    ,如果你的服务是多端的(浏览器端、Android、iOS、微信等),单页应用的模式便于你在多个端共用
    API,可以显著减少服务端的工作量。容易变化的 UI
    部分都已经前置到了多端,只受到业务数据模型影响的
    API,更容易稳定下来,便于提供鲁棒的服务;
  • 组件共享,在某些对性能体验要求不高的场景,或者产品处于快速试错阶段,借助于一些技术(Hybrid、React
    Native),可以在多端共享组件,便于产品的快速迭代,节约资源。

缺点:

  • 首次加载大量资源,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长;
  • 较高的前端开发门槛,MVC
    前置,对前端工程师的要求提高了,不再是『切切图,画画页面这么简单』;同时工作量也会增加数倍,开发这类应用前端工程师的数量往往多于后端;
  • 不利于 SEO,单页页面,数据在前端渲染,就意味着没有
    SEO,或者需要使用变通的方案。

           我是第一个a   我是第二个a         //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; 

使用vue-router构建单页应用

vue-router.js是Vue.js官方的路由插件用于构建单页面应用。
vue的单页应用是基于路由和组件的。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单面应用中,则是路径之间的切换,也就是组件的切换。

先来看一下官方提供的最简单的例子:示例
HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
  • router-link标签:跳转的链接,to=””是必须的属性,双引号中的内容是我们接下来在JS文件中定义的路由path。
  • router-view标签:展示我们匹配到的组件的区域。

JavaScript

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义(路由)组件。
// 也可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
    router
}).$mount('#app')

// 现在,应用已经启动了!

JavaScript文件主要做的事情是:

  • 定义路由列表,即routes。
  • 创建router实例及router配置,即router。
  • 创建和挂载根实例。

以上只是教我们用最简单的方法使用vue-router。但实际开发过程中,首先我们的vue组件显然不会只有一个template模板这么简单,会用到vue的单文件组件;
其次我们通常会希望<router-view>的范围是整个页面,而不是像现在这样一直有几个碍眼的导航存在于页面上,这就需要先定义好默认状态下<router-view>显示的内容。

既然是单页应用(SPA),那么整个项目有以下三个文件是必要的:

  • 一个html文件:index.html
  • 一个webpack打包时的入口js文件:main.js
  • 一个根vue组件,作为其他组件的挂载点:app.vue

接下来
我们就创建两个自定义组件:index.vue和hello.vue。我们希望的结果是他们之间互相跳转。
我们利用官方提供的脚手架vue-cli工具生成简单的一个基于webpack打包的vue项目
准备工作:

npm install webpack -g
npm install vue-cli -g
//打开要创建的项目路径目录,创建项目
vue init webpack-simple <项目名>
cd <项目名>
//安装依赖
npm install
//安装vue-router 
npm install vue-router --save
npm run dev

生成的vue项目如下图:

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

一、使用路由

  1. 首先在目录下创建components文件夹,然后再创建index.vuehello.vue文件

//index.vue
<template>
    <div>
        <h2>Index</h2>
        <hr>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is index components"
            }
        }
    }
</script>

//hello.vue
<template>
    <div>
        <h2>Hello Vue.js</h2>
        <hr/>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is hello components"
            }
        }
    }
</script>
  1. 修改main.js文件

//引入并安装vue-router插件
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入index.vue和hello.vue组件
import App from './App.vue';
import index from './components/index.vue';
import hello from './components/hello.vue';
//定义路由
const routes = [
    {path:'/',component:App},
    { path: '/index', component: index },
    { path: '/hello', component: hello }
]
//创建 router 实例,然后传 routes 配置
const router=new VueRouter({
  routes
});
//创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
new Vue({
  el:"#app",
  router
});
  1. 修改App.vue

<template>
  <div>
    ![](./assets/logo.png)
    <h1>{{msg}}</h1>
    <ul>
      <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
      <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
    </ul>
  </div>
</template>
  1. 修改index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-webpack-simple</title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

这样就会把渲染出来的页面挂载到这个id为app的div里了。

修改后运行的效果如下: