客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
安装
|
| 属性名 | 类型 | 描述 |
|---|---|---|
| routes | Array | 当前Router中所有路由配置 |
| modeString | 可选值: "hash" / "history" | 默认值'hash' 该模式下路由使用hash保证路由与视图一致history 模式使用h5新增 window.history 实现路由与视图一致 |
| linkActiveClass | String 默认值: "router-link-active" | 全局配置 默认的激活的 class |
| linkExactActiveClass | String 默认值: "router-link-exact-active" | 全局配置 默认的精确激活的 class。 |
注意 严格匹配link标签to路由路径必须全等于当前浏览器的url,非严格匹配当前浏览器url可以为当前link的子路由。
例子
to="/home" url="/home/user" 非严格匹配 to="/home" url="/home/user/10086" 非严格匹配 to="/home" url="/home" 严格匹配 to="/" url="/order" / 是所有路由的根路由,所以他们非严格匹配
{
path: string,
component?: Component, // 当前路由匹配时显示的路由组件
name?: string, // 命名路由
redirect?: string | Location | Function, // 路由重定向
props?: boolean | Object | Function, //
alias?: string | Array<string>, // 路由别名
children?: Array<RouteConfig>, // 嵌套路由
beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由守卫
caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home'
import Order from './views/Order'
import User from './views/User'
// Vue支持VueRouter
Vue.use(VueRouter)
let router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/order',
component: Order
},
{
path: '/user',
component: User
}
]
})
new Vue({
render: h => h(App),
router
}).$mount('#app')
VueRouter给Vue提供了两个组件
to: string | location 当用户点击该组件时就会跳转至to指定的路由
// 导航指定的url
<router-link to="/home">主页</router-link>
<router-link to="/order">订单</router-link>
<router-link to="/user">用户</router-link>
/* 导航指定的location
vue router中location对象的常用属性{
path:'/', //指定跳转路由的路径
hash:'#top' // 指定跳转路由的哈希值
name: 'Home', // 指定跳转的具名路由的name值
params: {}, // 指定跳转的路由传递params对象
query: {} // 指定跳转的路由传递query键值对
}
*/
<router-link :to="{path:'/user'}">user</router-link>
// 使用location进行页面跳转时,当前location的params属性无法传递给路由组件的
<router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// 使用name路由导航,可以向任何具名路由传递params
<router-link :to="{name:'User',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// query支持 name导航和path导航,不推荐传递对象属性时使用query传参
<router-link :to="{name:'User',hash:'#top',query:{id:1,name:'小明'}}">user</router-link>
replace: bool 当该属性为真时,路由的跳转将以替换的形式跳转到下一个页面(下一个路由会把当前浏览器历史记录栈中的url替换成将要跳转的路由),默认值为false
// 使用替换的形式跳转路由 <router-link class="tab-item" replace to="/user">用户</router-link>
append: bool 当该属性为真时,当前路由如果是相对路径(路径没有/开头)路由的跳转将会基于浏览器url进行下一级的跳转,默认值为false
// 如果当前浏览器url /order // 点击 Gec 会跳转到 /order/gec <router-link to="gec" append>Gec</router-link> // 点击 Gec1 因为Gec1的to不是相对路径 append就会无效,路由会跳转到 /gec <router-link to="/gec" append>Gec1</router-link> // 点击 Gec2 没有append 会跳转到 /gec <router-link to="gec">Gec2</router-link>
tag: string 指定当该router-link标签最终以什么DOM元素渲染到页面上,默认值是a
// 将router-link以span元素渲染到页面上 <router-link tag="span" class="tab-item" to="/">主页</router-link>
active-class: string 指定当前router-link元素,如果与浏览器url非严格匹配时class名。默认值是VueRouter实例化时 linkActiveClass 指定值
// 当前router-link非严格匹配时class名为aaaa <router-link active-class="aaaa" to="/order">订单</router-link>
event: string | Array<string> 指定当前router-link元素,声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。默认值是click
// 双击 和 点击都能触发当前元素的路由跳转 <router-link :event="['dblclick','click']" to="/">主页</router-link>
router-view 组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 router-view，根据嵌套路径，渲染嵌套组件。 其他属性 (非 router-view 使用的属性除name) 都直接传给渲染的组件，很多时候，每个路由的数据都是包含在路由参数中。
因为它也是个组件，所以可以配合 transition 和 keep-alive 使用。如果两个结合一起用，要确保在内层使用 keep-alive：
<transition name="fade">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
以上就是详解Vue-Router的安装与使用的详细内容，更多关于Vue-Router的安装与使用的资料请关注极客世界其它相关文章！
请发表评论