【Vue】Vue-route路由

Vue-router官网
由vue-router模块控制，需要额外安装依赖。参考官网

npm install vue-router --save

组成

• router-link：路由链接，跳转至路由视图，展示指定路由组件信息
• router-view：路由视图，展示路由组件信息
• route：路由信息
• router：路由对象

router-link

路由跳转，类似a标签，路由跳转作用

<router-link to="" />

router-view

路由视图，用于其他组件在该视图位置显示。

<router-view name="name" />
<!-- 可以指定视图名，在路由跳转时可通过视图名指定视图位置跳转路由 -->

route

{
   
  path:'/url',
  name:'name',
  components:{
    // one,two会绑定对应名称的路由视图上<router-view name='name'/>
    default: ComponentZero,
    one:ComponentOne,
    two:ComponentTwo, 
  },
  meta: {
    transition: 'slide-right' }, // 路由元信息，可以通过router.meta获取指定元信息
  component:ComponentZero, //在默认路由视图上跳转
  redirect:'', // 重定向，也可详细描述route信息{path:'url'}
  children:[ // 嵌套路由
    {
   
      path:'/url1', // 即/url/url1/的访问
      component:ComponentOne,
    },
    {
   
      path:'/url2', // 即/url/url2/的访问
      component:ComponentTwo,
    }
  ],
  beforeEnter:(to, from) => {
    // 路由守卫，独享
    // reject the navigation
    return false
  },
}

router

{
   
  history:createWebHashHistory(), // history模式，hash式和非hash式
  routes:routes,// 绑定路由集
  strict: true, // 严格区分大小写，也可在单个路由配置
  sensitive: true, // 不区分大小写，也可在单个路由配置
  scrollBehavior (to, from, savedPosition) {
    //滚动行为
    // return 期望滚动到哪个的位置
  },
}

匹配规则

• 自定义正则
• 可重复参数
• 大小写敏感控制
• 可选参数

const routes = [
  // 匹配 /o/3549
  {
    path: '/o/:orderId' },
  // 匹配 /p/books
  {
    path: '/p/:productName' },
  // /:orderId -> 仅匹配数字
  {
    path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何内容
  {
    path: '/:productName' },

  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等,至少有一个参数，否则异常
  {
    path: '/:chapters+' },
  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
  {
    path: '/:chapters*' },
  // 匹配 /, /1, /1/2, 等
  {
    path: '/:chapters(\\d+)*' },


  // 将匹配 /users/posva 而非：
  // - /users/posva/ 当 strict: true
  // - /Users/posva 当 sensitive: true
  {
    path: '/users/:id', sensitive: true }