Vue 路由（Router）详细介绍（切换，前端开发就业前景

store,

render: h => h(App)

}).$mount(‘#app’)

准备工作完毕，接下来介绍如何使用路由进行组件（页面）的跳转、传参、通信等。

基本使用

---

在使用之前，需要先简单介绍router里面的几个常用的api。

组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

  Props

to

• 类型: string | Location

• required

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

active-class

• 类型: string

• 默认值: "router-link-active"

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

  Props

name

• 类型: string

• 默认值: "default"

如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。

现在，我们就来使用上面相关属性实现简单的路由跳转

假设有两个组件Home.vue、About.vue

This is a Home page

This is an About page

在App.vue中使用 （其中to为路由配置中对应的路径，active-class为链接激活时的样式）进行路由导航，使用渲染路由匹配到的组件

Home

|

About

页面展示效果