Vue-Router 学习笔记

 

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是一个数组对象,每一项是一个路由地址,包含上面的属性和含义