vue路由使用

路由懒加载

• 组件异步加载
• 在需要的时候再加载路由对应的组件
• 可以把组件分组打包 /* webpackChunkName: “about-group” */

{
  path: '/about',
  name: 'About',// 命名路由
  // component: 在路由匹配的时候，执行这里的函数加载对应的组件
  component: () => import(/* webpackChunkName: "about-group" */ '../views/About.vue')
}

命名路由

• 在 routes 配置中给某个路由设置name

{// 一个路由配置
  path: '/',// 路由路径
  name: 'Home',// 命名路由
  component: Home// 当地址栏访问地址为 '/'时，在router-view中使用组件Home
}
<router-link :to="{name: 'Home'}">Box</router-link>

命名视图

• 给<router-view name="a">标签设置name属性
• 在同一个路由地址，渲染多个组件，多个视图

{
  path: '/user',
  name: 'User',
  components: {// 命名视图的配置
    default: ()=> import('../views/User.vue'),
    login: ()=> import('../views/Login.vue')
  }
}
<router-view name="login"></router-view>

动态路由

{
  path: '/user/:userId',// 动态路由，路由地址为：/user/可变数据
  name: 'Box',
  component: () => import(/* webpackChunkName: "box" */ '../views/User.vue')
},

设置404页面

{// 配置以上路由都不匹配时，渲染404组件
  path: '*',// 匹配所有路径
  name: 'notfound',
  component: () => import('../views/404.vue')
},

重定向

• 从 /a 重定向到 /b，url会改变

{// 一个路由配置
  path: '/index',// 路由路径
  redirect: '/'// 重定向，当访问地址为/index时，重定向到path: '/'
},

别名

• 路由地址 /a 别名为 /b，当用户访问/b时，url不会变，实际匹配/a

{// 一个路由配置
      path: '/',// 路由路径
      name: 'Home',// 命名路由
      alias: '/home',// 别名
      component: Home// 当地址栏访问地址为 '/'或'/home'时，在router-view中使用组件Home
    },

路由模式

• 哈希模式 url中带有# （默认）
• history模式 url中没有#
• 在创建路由对象的配置项中设置模式
  mode: ‘hash’,// 哈希模式（默认）
  mode: ‘history’,// history模式

声明式导航和编程式导航

百度 -> 声明式导航
window.location.href = “www.baidu.com” -> 编程式导航

Home -> 声明式导航
通过路由对象的api进行导航切换 -> 编程式导航
this.$router.push()访问的记录被添加到history栈this.$router.replace() 访问的记录不被添加到history栈
this.$router.go(-1) 跳转到指定的某天历史记录

路由参数

this.$router是路由操作对象，用于操作路由this.$route是路由信息对象，用于获取路由信息

• 路由传参

1. this.$router.push(’/details?goodsId=’+code) 类似get
2. this.$router.push({
   path: ‘/details’,
   query: {
   id: 3
   }
   })
3. this.$router.push({
   name: ‘Details’,
   params: {
   id: 2
   }
   })
4. 通过动态路由传参

{
  path: '/details/:id',// 动态路由
  name: 'Details',
  props: true,// 动态路由的参数可以在Details组件中通过props接收
  component: () => import(/* webpackChunkName: "box" */ '../views/Details.vue')
},
this.$router.push('/details/'+goodsId) 传参
this.$route.params.id  接收参数

• 注意：路由传参时 path和query组合使用，name和params组合使用

• this.$router.push({path:’/’,query:{}}) 类似get，数据出现在url

• this.$router.push({name:’/’,params:{}}) 类似post，数据不出现在url

• 接收路由参数

1. this.$route.query
2. this.$route.params
3. 通过props接收

嵌套路由

• 子路由（二级路由）
• /box/child

{
  path: '/box',
  name: 'Box',
  component: () => import(/* webpackChunkName: "box" */ '../views/Box.vue'),
  children: [// 子路由配置
    {
      path: 'child',// 访问地址为 /box/child 进入子路由，子路由的path不要加/
      name: 'Child',
      component: () => import(/* webpackChunkName: "box" */ '../views/Child.vue'),
      children: []
    }
  ]
},

rem自适应

% 相对父元素
em 相对父元素的字体大小
rem root+em  root->html -> font-size: 20px;  1rem = 20px
vw viewport width 视口宽度  100vw 100%

<script>
  function setHtmlFontSize(){
    let designWidth = 750;//设计稿宽度  html font-size: 100px
    let deviceWidth = document.documentElement.clientWidth;// 设备宽度
    document.documentElement.style.fontSize = deviceWidth/designWidth*100+'px';
  }
  setHtmlFontSize();
  window.onresize = function (){
    setHtmlFontSize();
  }
</script>