vue-router
来源:互联网 发布:linux如何修改ip地址 编辑:程序博客网 时间:2024/06/06 11:38
一.官网的例子
1.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> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view></div>
2.router-link:
<router-link> 组件支持用户在具有路由功能的应用中(点击)导航。通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS类名。
Props# to (required)
类型:string | object
表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。
<!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a> <!-- 使用 v-bind 的 JS 表达式 --> <router-link v-bind:to="'home'">Home</router-link> <!-- 不写 v-bind 也可以,就像绑定别的属性一样 --> <router-link :to="'home'">Home</router-link> <!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link> <!-- 命名的路由 --> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> <!-- 带查询参数,下面的结果为 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
# replace
类型:boolean
默认值:false
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history记录。
<router-link :to="{ path: '/abc'}" replace></router-link>
# append
类型:boolean
默认值:false
设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>
<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --><li>foo</li>
# active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
# exact
类型: boolean
默认值: false
"是否激活"默认类名的依据是 inclusive match (全包含匹配)。举个例子,如果当前的路径是 /a 开头的,那么 <router-link to="/a"> 也会被设置 CSS类名。
按照这个规则,<router-link to="/"> 将会点亮各个路由!想要链接使用 "exact匹配模式",则使用 exact 属性:
<!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>
# events
类型: string | Array<string>
默认值: 'click'
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
将"激活时的CSS类名"应用在外层元素
有时候我们要让 "激活时的CSS类名"应用在外层元素,而不是 <a> 标签本身,那么可以用 <router-link> 渲染外层元素,包裹着内层的原生 <a> 标签:
<router-link tag="li" to="/foo"> <a>/foo</a></router-link>
在这种情况下,<a> 将作为真实的链接(它会获得正确的 href 的),而 "激活时的CSS类名"则设置到外层的 <li>。
3.router-view
<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。
属性:
#name
类型:string
默认值:‘default’
如果 <router-view>设置了名称,则会渲染对应的路由配置中 components 下的相应组件。
行为表现
其他属性(非 router-view使用的属性)都直接传给渲染的组件,很多时候,每个路由的数据都是包含在路由参数中。
因为它也是个组件,所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用,要确保在内层使用 <keep-alive>:
<transition>HTML <keep-alive> <router-view></router-view> </keep-alive></transition>
// 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)// 1. 定义(路由)组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器,// 或者,只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }]// 3. 创建 router 实例,然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({ routes // (缩写)相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,// 从而让整个应用都有路由功能const app = new Vue({ router}).$mount('#app')// 现在,应用已经启动了!
二.动态路由匹配
可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)
const User = {//注册子组件 template: '<div>User</div>'}const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]})
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:
const User = { template: '<div>User {{ $route.params.id }}</div>'}
2.
路由信息对象
一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL解析得到的信息,还有 URL匹配到的 route records(路由记录)。
route object 是 immutable(不可变)的,每次成功的导航后都会产生一个新的对象。
route object 出现在多个地方:
- 组件内的 this.$route 和 $route watcher回调(监测变化处理);
- router.match(location) 的返回值
- 导航钩子的参数:
router.beforeEach((to, from, next) => { // to 和 from 都是 路由信息对象})
scrollBehavior 方法的参数:
- vue-router
- vue-router
- vue-router
- vue-router
- Vue router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue 路由vue-router
- Java JDK 版本切换
- JavaScript的知识点(三)
- (7)数据挖掘算法之kNN
- 中位数
- 读取键盘的方向键
- vue-router
- mysql最大值,最小值,总和查询与计数查询
- Android网络防火墙
- (8)数据挖掘算法之AdaBoost
- vue2 router 动态传参,多个参数
- 数据库范式1NF 2NF 3NF BCNF 4NF 5NF
- Unity 3D学习日记(1)
- 贝叶斯方法
- 为什么要使用虚函数和 指针(或是引用)才能实现多态?