# vue-router

vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库，能够以声明式的方法编写页面的导航和跳转信息。 由于 Weex 的运行环境不只是浏览器，通常是以移动端原生环境为主，然而在 Android 和 iOS 中都没有浏览器的 History API，也不存在 DOM，因此如果想在 Weex 环境中使用 vue-router ，有些功能受到了限制，使用时应该注意。

# 路由模式

vue-router 提供了三种运行模式：

• hash:使用 URL hash 值来作路由。默认模式。
• history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。。

配置方法是在定义路由时，传递 mode 属性：

new Vue({
  mode: "abstract"
});

从三种模式的介绍中也可以看出来，Weex 环境中只支持使用 abstract 模式。不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以在使用时只要不写 mode 配置即可。默认 vue-router 会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。

#编程式导航

vue-router 中使用 <router-link> 创建导航链接，不过在其中使用了基于 DOM 事件的一些特性，在 Weex 原生环境中并不能很好的工作。在 Weex 中，你必须使用编程式导航来编写页面跳转逻辑。

编程式导航其实就是通过主动调用 router 实例上的 push 方法实现跳转。

使用 <router-link>的代码示例：

<!-- 只能在 Web 中使用，Native 环境不支持！ -->
<template>
  <div>
    <router-link to="profile">
      <text>Profile</text>
    </router-link>
  </div>
</template>

在 weex 中，需要写成这样子：

<template>
  <div>
    <text @click="jump">Profile</text>
  </div>
</template>

<script>
import router from "./path/to/router";
export default {
  methods: {
    jump() {
      router.push("profile");
    }
  }
};
</script>

# 安装

npm 安装路由依赖模块 vue-router

    npm install --save vue-router

# 使用

# 定义路由配置文件

在子项目目录中添加router文件夹，在该文件夹下创建router.js文件，内容如下：

import Router from 'vue-router'
import HOME from 'src/widgets/demo/views/router/home.vue'
import FOCUS from 'src/widgets/demo/views/router/focus.vue'
import RECOMMEND from 'src/widgets/demo/views/router/recommend.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HOME
    },
    {
      //传参
      path: '/focus/:id',
      name: 'focus',
      component: FOCUS
    },
    {
      path: '/recommend',
      name: 'recommend',
      component: RECOMMEND
    }
  ]
})

# 创建路由子页面文件

在views目录下新建router文件，里面创建响应子页面的vue文件，文件和名称可自定义。

# 创建路由主页面和页面入口文件

在entry文件夹下面，创建页面如果文件，在views文件夹下面创建路由主页面，注意确保两者之间的一一对应关系，以及内部引用路径保持正确。

#

# 示例：

脚手架中已集成了router的项目模版，可以加载该模版，快速切入开发。

• # 下载 router 工程模版

dolphin create | dolphin c
? Project name: (weex-demo-project): 输入项目名称
? Project choice? (Use arrow keys)
> router    (选择此项)
? version     (版本信息)
? description (项目描述)
? author      (作者)
...loading
New project has been created successfully!
> cd weex-demo-project
        `Run Application`
            npm install (推荐 cnpm install)
            npm start（默认）  or npm run dev

• # 安装依赖

npm install (推荐 cnpm install)

• # 启动项目

npm start

# QA