vue-router2

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
为了和vue.js2.0配套，vue-router的最新版本也是2.0。
中文文档:http://router.vuejs.org/zh-cn/

npm安装

推荐使用npm方式安装
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此

参考中文版文档
http://router.vuejs.org/zh-cn/.

基本例子

APP.vue HTML

<div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航.通过传入 `to` 属性指定链接--><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><ul><li><router-link to="/first">点我跳转到第一页</router-link></li><li><router-link to="/second">点我跳转到第二页</router-link></li></ul></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div>

APP.vue script

<script>import firstComponent from './components/first-component.vue'import secondComponent from './components/second-component.vue'export default {name: 'app',data() {return {msg: 'Welcome to Your Vue.js App'}},components: {firstComponent,secondComponent}}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
//开启debug模式,在调试模式中，Vue 会：1. 为所有的警告打印栈追踪。 2. 把所有的锚节点以注释节点显示在 DOM 中，更易于检查渲染结果的结构。
Vue.config.debug = true;Vue.use(VueRouter); //0.使用模块化机制编程， 要调用Vue.use(VueRouter)

//1.导入或定义路由组件

import firstComponent from './components/first-component.vue'
import secondComponent from './components/second-component.vue'

// 2.创建一个路由器实例
// 并且配置路由规则，每个路由应该映射一个组件。

const router = new VueRouter({mode: 'history',base: __dirname,routes: [{path: '/first',component: firstComponent},{path: '/second',component: secondComponent}]
})

// 3. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。

const app = new Vue({router: router,render: h => h(App)
}).$mount('#app')

.vue格式单文件组件

单文件模块方式使用.vue文件，需要有打包工具去解析文件才行。这里我们用webpack。
template 里是模板代码，这里一般是一个闭合的html标签，比如一个div。
style 里是css代码，这个代码是作用到整个页面的，如果只想作用到当前的模板中，需要用scoped属性
script 注意这里使用的是 es6 的代码，使用babel来编译，所以理所当然需要安装 babel
export default表示当前文件中的默认组件，这样我们通过import引入组件时，就自动引入了默认组件。

<template><div><app-header></app-header></div>
</template><style>
...
</style>

<script>import AppHeader from './AppHeader.vue'export default {name:'app',props:['data']data() {return {}},methods: {handleClick() {}},components: {AppHeader}}
</script>

在工程目录/src下创建components文件夹，并在component文件夹下创建一个 first-component.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template><div id="first-component"><h2>{{title}}</h2>
</div>
</template>

<script type="text/javascript">
export default {data () {return {title: "first component title"}}
}
</script><style>
</style>

使用组件

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id= “ app ” >这个组件就是单页面应用的主入口，所有组件放到app这个根组件就可以显示)>
第一步，引入。在标签内的 data 代码块后面加上 components: { firstComponent }。记得中间加英文逗号!!!
第三步，使用。在内加上
或通过路由路径显示某个组件。

运行：
在命令行转到当前工程目录中输入
npm run dev
在Chrome浏览器中输入http://localhost:8080
浏览页面内容。

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：
const User = {
template: ‘

’
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: ‘/user/:id’, component: User }
]
})
现在 /user/foo 和 /user/bar 都将映射到相同的路由。
动态路由,可携带参数跳转

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {template: '<div>User {{ $route.params.id }}</div>'
}

使用组件
/user/foo
/user/bar

嵌套路由

实际应用中的界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
接着上节创建的 my-simple-demo项目和刚创建的User组件及路由：
这里的 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：

const User = {template: `  <div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view>
</div>
`}
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({routes: [{ path: '/user/:id', component: User,children: [// UserHome will be rendered inside User's <router-view>// when /user/:id is matched{ path: '', component: UserHome },// UserProfile will be rendered inside User's <router-view>// when /user/:id/profile is matched{ path: 'profile', component: UserProfile },// UserPosts will be rendered inside User's <router-view>// when /user/:id/posts is matched{ path: 'posts', component: UserPosts }]}]
})

在App.vue中添加路由链接实现切换显示：

 <p><router-link to="/user/foo">/user/foo</router-link><router-link to="/user/foo/profile">/user/foo/profile</router-link><router-link to="/user/foo/posts">/user/foo/posts</router-link></p>

编程式的导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串
router.push(‘home’)
// 对象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

编程式的导航例子

<button v-on:click="goProfile()">goProfile</button>
methods:{goProfile:function () {this.$router.push('/user/foo/profile')}
}

编程式的导航-router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
例子
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败
router.go(-100)
router.go(100)

编程式的导航-router.replace(location)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。