标签：好运 pat 选项 about 传参 nod 包装 原来 options
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)<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>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: ‘<div>foo</div>‘ }
const Bar = { template: ‘<div>bar</div>‘ }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，（依据配置文件生成vue的子类，vnode树是这些子类实例的构建成的）
// 或者，只是一个组件配置对象。（配置文件有4种方式获得方式，1种同步，3种异步，详见vue的注册组件 / 插件）
// 我们晚点再讨论嵌套路由。
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‘)declare type RouteConfig = {
path: string; // 路径参数包括动态路径、多段路径
component?: Component;
name?: string; // 命名路由
components?: { [name: string]: Component }; // 命名视图组件
redirect?: string | Location | Function; // 重定向
props?: boolean | Object | Function; // 传参
alias?: string | Array<string>; // 别名
children?: Array<RouteConfig>; // 嵌套路由
beforeEnter?: (to: Route, from: Route, next: Function) => void;
meta?: any; // 元信息
// 2.6.0+
caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
pathToRegexpOptions?: Object; // 编译正则的选项
}const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: ‘/user/:id‘, component: User } // 像 /user/foo 和 /user/bar 都将映射到相同的路由
]
})
...
template: ‘<div>User {{ $route.params.id }}</div>‘ // id由路由中的:后接字符串决定
.../user/:username // 匹配/user/evan // $route.params === { username: ‘evan‘ }
/user/:username/post/:post_id // 匹配/user/evan/post/123 // $route.params === { username: ‘evan‘, post_id: 123 } path: ‘/about/:id1/second‘匹配不到url为/about/1/2/second的路径{ path: ‘/optional-params/:foo?‘ }参数/:foo可有可无，可以匹配到/optional-params{ path: ‘/params-with-regex/:id(\\d+)‘ }参数id必须满足\d+这个正则表达式，注意这个正则表达式需要转义所以\要写为\\{ path: ‘/asterisk/*‘ }可以匹配多个\分割的路径，例如/asterisk/foo和/asterisk/foo/bar，同理{ path: ‘*‘ }可以匹配任意路径，用于放置在数组最后，处理匹配不到任何路由的情况{ path: ‘/optional-group/(foo/)?bar‘ }路由的部分节点可有可无，例如可以匹配/optional-group/bar和/optional-group/foo/bar{ path: ‘/foo‘, component: () => import(‘./Foo.vue‘) }需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。{ path: ‘/foo‘, component: () => Promise.resolve({ /* 组件定义对象 */ }) }const router = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component: User, // User组件中存在一个<router-view>用于渲染children匹配到的组件
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: ‘profile‘,
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: ‘posts‘,
component: UserPosts
}
]
}
]
})
// 可以通过设置children下path为‘‘来匹配路径仅仅为父路径时
{ path: ‘‘, component: UserHome }, // 依据上例，路径为/user/:id时，User组件内的<router-view>渲染UserHome 组件const router = new VueRouter({
routes: [
{
path: ‘/user/:userId‘,
name: ‘user‘,
component: User
}
]
})<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
routes: [
{
path: ‘/‘,
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
const router = new VueRouter({
routes: [
{ path: ‘/a‘, redirect: ‘/b‘ } // 还可以是{ path: ‘relative-redirect‘, redirect: ‘foo‘ }有点像等价替换
]
})
// 重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: ‘/a‘, redirect: { name: ‘foo‘ }}
]
})
// 一个方法，动态返回重定向目标：
{ path: ‘/dynamic-redirect/:id?‘,
redirect: to => {
const { hash, params, query } = to
if (query.to === ‘foo‘) {
return { path: ‘/foo‘, query: null }
}
if (hash === ‘#baz‘) {
return { name: ‘baz‘, hash: ‘‘ }
}
if (params.id) {
return ‘/with-params/:id‘
} else {
return ‘/bar‘
}
}
},
// 其中的参数可以传递
{ path: ‘/redirect-with-params/:id‘, redirect: ‘/with-params/:id‘ },const router = new VueRouter({
routes: [
{ path: ‘/a‘, component: A, alias: ‘/b‘ }
]
})
// 高级用法
{ path: ‘/home‘, component: Home,
children: [
// absolute alias
{ path: ‘foo‘, component: Foo, alias: ‘/foo‘ }, // 不仅当前/级别可以设置别人，还可以从根级别开始设置例如
// relative alias (alias to /home/bar-alias)
{ path: ‘bar‘, component: Bar, alias: ‘bar-alias‘ }, // 当前级别的别人
// multiple aliases
{ path: ‘baz‘, component: Baz, alias: [‘/baz‘, ‘baz-alias‘] } // 多个别名
]
}// 如果同时存在:id和props传入id，哪个优先级高些？怀疑是组件的传入值更高些
const User = {
props: [‘id‘],
template: ‘<div>User {{ id }}</div>‘
}
const router = new VueRouter({
routes: [
{ path: ‘/user/:id‘, component: User, props: true }, // 如果 props 被设置为 true，route.params 将会被设置为组件属性，如果组件没有对应的props会怎样？vue中传入未定义的props会自动绑定到组件的根元素上。布尔值的方式并不灵活，要求props和:id要做到名称一一对应
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: ‘/user/:id‘,
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
// 似乎可以在路由中设置props的值，例如
{ path: ‘/static‘, component: Hello, props: { name: ‘world‘ }}, // 这时，props.name === ‘world’ ？
// 你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: ‘/search‘, component: SearchUser, props: (route) => ({ query: route.query.q }) } // 根据是否有query来判断是否需要传入props
]
})const router = new VueRouter({
routes: [
{ // 父路由记录
path: ‘/foo‘,
component: Foo,
children: [
{ // 子路由记录
path: ‘bar‘,
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})const router = new VueRouter({
mode: ‘history‘,
routes: [
{ path: ‘*‘, component: NotFoundComponent } // 添加在最后
]
})to 和 from 都是路由对象return { x: 0, y: 0 }滚动到页面顶部return { selector: to.hash }滚动到锚点，offset应该是相对锚点的偏移量const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
// 返回一个 Promise
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}return savedPosition标签：好运 pat 选项 about 传参 nod 包装 原来 options
原文地址：https://www.cnblogs.com/qq3279338858/p/10302031.html
