Vue/ Vue 路由配置 (重温 ) 一级 二级 路由配置 及 路由各种方法重定向 (浏览器渲染)

    Vue路由配置流程: 配置完路由后 , 需要写入到实列内,在App.vue写入 <router-view> 标签进行一级路由配置 ，在components/user.vue写入 <router-view> 进行二级路由配置 

路由配置

一. 一级路由配置与路由内方法

语法:

const router = new VueRouter({
  routes: [

    // 一级路由
    {path: '/路径名',component: 组件名 },

   // 重定向

    {path: ' /  ',  redirect: '/路径名 '  },

    // 404

    {path: ' /:pathMatch(.*)* ',component: 组件名 },
     
  ],
})

// 一级路由出口 -->  App.vue

 <router-view> </router-view>

说明: Vue路由是指根据url 分配对应的处理程序 作用就是url 调用对应的控制器

重定向属性说明: 1. 监测默认路径 path:'/'  2. redirct配置项 值是要强制切换的路由路径

重定向说明: 匹配path后 ,强制跳转path路径 ，网页打开url默认值是 / 路径 ，redirct是设置要重定向到那个路径\

重定向应用场景: 第一次打开网页 配置默认页面

404 : 当找不到路径匹配时 给个提示页面 ,path匹配 * (任意路径) 

</router-view>作用: 展示这个页面路由下面的子路由

二. 二级路由配置

语法:

const router = new VueRouter({
  routes: [ {

//一级路由

path: '/路径名', component: 组件名,

children: {

// 二级路由

{path: '/路径名',component: 组件名 },

} },

  ],
})

//配置一级路由出口 --> App.vue

 <router-view> </router-view>

配置二级路由出口  --> components/user.vue

 <router-view> </router-view>

作用: ；嵌套路由的作用就是让新的页面内容展示子组件的占位符

说明: 二级路由往后 path 直接写名字 ， 无需写开头(他会自动拼接)