(九)路由路径的修改和404页面

本节知识点

• 路径去掉#

• 增加404页面

路径去掉#

• 只需要在路由文件里面加入个model属性即可
• mode属性有2个 第一个是history 第二个就是hash

export default new Router({
  mode:"history",  //要是换成hash则又回到原位
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        default: HelloWorld,
        left: Hi1,
        right: Hi2,
      }
    },
    {
      path:'/Hi/:username/:id',
      name:"Hi",
      component:Hi,
      children:[

        {path:"hi1",name:"Hi1",component:Hi1},
        {path:"hi2",name:"Hi2",component:Hi2},
      ]
    }
  ]
})

404页面的设置

• 当我们找不到页面的时后显示

• 新建一个404页面

<template>
  <div>
    <div class="text1">
      {{message1}}
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      name:"Hi1",
      data(){
        return {
          message1:"这个就是Hi1页面"
        }
      }
    }
</script>

<style scoped>
  .text1{
    font-size:46px;
    color:red;
  }
</style>

• 在路由配置里面写

{
  path:'*',
 component:Error
}

这样就配置好了

• 你现在随便写路由他就会访问到Error