Vue.js的路由(Vue Router)是什么

摘自官网:

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
那么什么是路由呢?

路由就是通过互联的网络把信息从源地址传送到目的地址的活动

路由提供了两种机制：路由和传送

路由是决定数据包从来源到目的地的路径

传送将输入端的数据转移到合适的输出端

而路由又分为两种:

1.后端路由

2.前端路由

Vue Router 则属于前端路由

Vue Router的使用:

 

使用 Vue + Vue Router 创建单页应用程序感觉很自然：使用 Vue.js，我们已经在用组件组合我们的应用程序。将 Vue Router 添加到组合中时，我们需要做的就是将我们的组件映射到路由，并让 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>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>

 

#JavaScript

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')

 

// Now the app has started!
通过注入路由器，我们可以访问它this.$router以及this.$route任何组件内部的当前路由：

// Home.vue

export default {
computed: {
username() {
// We will see what `params` is shortly
return this.$route.params.username
}
},
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
}

 

请注意，当 a 的目标路由匹配时，它<router-link>会自动获取.router-link-active该类。