1:当router-link组件默认渲染成一个a标签,通过to属性指定目标地址,当对应的路由匹配成功,会自动给激活的标签设置class属性值
API
1:to:表示目标路由的链接,当被点击时,内部会立刻把to的值传到router,push(),
2:replace 设置的话,调用的是router.replace() 而不是router.push()的方法
(区别在于一个会往路由history当中添加记录，一个不会)
3:append 是否在当前路径后面添加路径
(例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b)
4:默认是渲染是a标签,通过tag设置渲染成其他的标签,同样它还是会触发点击,触发导航
(默认样式下 a标签会有一些特殊的样式)
5:active-class,目标激活不是会添加一个class嘛,默认是router-link-active,通过这个可以设置,默认值可以通过路由的构造选项 linkActiveClass 来全局配置
2:router-link对应的路由(看他对应的那个组件),那么他所指向的组件将会渲染到他对应的组件中 router-view
理解:router-link的to属性会指定一个路径,我们需要确认这个路径所对应的是哪一个组件(或者称为区域),那么路由定义里面路径所对应的组件就会渲染到这个区域内的router-view
注意:<router-view>组件是一个functional组件,功能:渲染路径匹配到的视图组件
3:嵌套路由:如果路径为空,会放入默认的路由对应的组件,子路由同理,如果想渲染子路由,可以提供一个空的子路由
routes: [
{
path:'/',
component:XQNindex,
name:'index',
children:[{
path:'',
component:testa
},{
path:'only',
component:testc
}]
}
]
//默认渲染XQNindex这个组件,同时XQNindex组件当中也存在router-view,也会渲染testa
4:编程式导航
this.$router.push(location,onComplete?,onAbort?) 可选的参数,导航完成或者导航终止调用
1:导航到不同的url:this.$router.push(),该方法会向history栈添加一个新的记录
2:this.$router.replace(),他不会向history添加新的记录,而是替换掉当前的history, 注意:router-link 也有这个属性
3:this.$router.go()向前或者向后多少步 router.go(1) == history.forward() router.go(-1) == history.back()
5:命名路由,给每一个路由添加一个名字
优点:我们使用router-link或者router.push()的时候,直接直接通过名字来调用或者跳转,特别是当你的路由等级太多的时候
export default new Router({
routes: [
{
path:'/',
component:XQNindex,
name:'index', },
//我的主页
{
path:'/mynews',
component:XQNmynews,
name:'mynews',
},
//梦岛广场
{
path:'/square',
component:XQNsquare,
name:'square',
},
//同人站
{
path:'/fans',
component:XQNfans,
name:'fans',
redirect:'/',
},
]
})
//每个路由地址都有一个名字,我们使用router-link的时候,就可以名称来跳转
6:命名视图:解决了在一个组件中同时展示多个路由,如果 router-view 没有设置名字，那么默认为 default
1:一个视图同时只能渲染一个组件,因此对于同个路由,多个视图就需要使用多个组件,那么定义路由的时候要使用components
<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
}
}
]
})
注解:router-view就是试图,'/'就是路由
7:嵌套命名视图,XQNmynews组件里面使用了三个router-view,他的子组件将渲染到里面去,同时渲染多个子组件的情况,使用命名视图,没有名称的使用default
{
path:'/mynews',
component:XQNmynews,
name:'mynews',
children:[{
path:'',
components:{
default:testa,
b:testb,
c:testc
}
},{
path:'only',
component:testc
}]
},
8:重定向和别名
重定向的目标
1:路径:{ path: '/a', redirect: '/b' } 当路径指向/a 的时候将他重新指向/b,
2:命名路由: { path: '/a', redirect: { name: 'foo' }} foo是一个命名的路由...待续
3:优点: 别名:/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
优点:待续....
9：路由优先级
谁先定义，谁的级别就更高
routes:[
{path:'/hello',component:hello},
{path:'/hello',component:hello1}
]
10：vue-router实例选项
routes[{RouteConfig}]
重点:RouteConfig的配置
declare type RouteConfig = {
path: string;
component?: Component;
name?: string; // 命名路由
components?: { [name: string]: Component }; // 命名视图组件
redirect?: string | Location | Function;
props?: boolean | string | 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; // 编译正则的选项
}
注解:创建Router的实例时候,可以传入多个选项,其中router是一个数组对象,每一项是一个路由地址,包含上面的属性和含义