11_vue-router路由解决方案

一、vue-router 路由解决方案

• 点击指定标签(a),地址栏(hash/history)发生变化,在指定的元素内(路由容器)显示指定的html字符串(组件)

二、安装npm i vue-router -S

三、创建并挂载路由实例

// @/router/index.js
// 0 导入vue-router里面的createRouter
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
// 1. 导入路由组件
import Login from '@/views/login.vue'
import Layout from '@/views/layout.vue'

// 2. 定义 地址栏hash/history 和要显示组件之间的关系
// path 定义路径
// component 定义要显示的组件
const routes = [
  { path: '/login', component: Login },
  { path: '/banner', component: Layout },
  { path: '/prod', component: Layout },
  { path: '/user', component: Layout },
  { path: '/data', component: Layout },
  { path: '/edit', component: Layout },
  { path: '/execl', component: Layout },
  { path: '/map', component: Layout },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
  // 4. 内部提供了模式的实现
  history: createWebHashHistory(), // hash模式，#
  routes // `routes`:routes 的简写
})

// 5. 导入vueRouter实例
export default router;
// @/main.js
import router from '@/router'
// ....
app.use(router)
// ...

四、路由视图

• 展示匹配的路由组件

• <RouterView></RouterView>

五、导航方式

• 声明式导航
  • 通过点击标签来完成的
  • 通过router-link组件来完成
• 编程式导航
  • 通过js代码来完成
  • this.$router.push(‘/login’)
  • this.$router.push({path:‘/login’})
  • this.$router.go(n) - n是正数表示前进几个路由，是负数表示后退几个路由
  • this.$router.back() - 后退
  • 类似location.href,history.back(),history.go(),…

六、路由重定向

• {path:'/',redirect:'/login'}
• 当匹配到一个路由的时候，希望直接跳转到另一个路由，可以使用重定向
• 重定向以后，路由会变成新的路由

七、通配符

• 以前是*,现在要用
  • 匹配多个/的路由
    • { path: '/:pathMatch(.*)*' ,component:NotFount }
  • 匹配一个/的路由
    • { path: '/:pathMatch(.*)' ,component:NotFount }

八、嵌套路由

• 在匹配的路由里面书写children属性
• children是一个数组，里面的每一个对象写法和路由写法一样

const routes = [
  // ...
  { 
    path: '/prod', 
    component: Layout,
    // 嵌套路由
    children:[
      {path:'list',component:Prolist},
      {path:'recommend',component:Recommend},
      {path:'secskill',component:Secskill},
      {path:'select',component:Select},
    ]
  }
]

九、$router和$route

• 组件里面的this.$router是总的路由实例，可以使用 push,go,back等编程式导航方法
  • 在组合式api中，使用 useRouter() 获取
  • const router = useRouter()
• 组件里面的this.$route是当前匹配的路由信息对象，可以有
  • path:匹配到的路由地址
  • fullPath: 匹配到的路由地址
  • 在组合式api中，使用 useRoute() 获取
  • const route = useRoute()

十、命名路由

• 给路由设置一个name属性，通过路由可以跳转
• 地址栏不会变成路由名，还是显示path定义的路由地址
  • 编程式导航: this.$router.push({name:'路由名'})
  • 声明式导航: <router-link :to='{name:'路由名'}'></router-link>

十一、matched

• this.$route.matched 是一个数组
• 是当前匹配的路由及其上层所有路由信息
• 0 最上层的路有个
• length-1 当前路由

十二、导航守卫

• 全局守卫
  • router.beforeEach((to,from)=>{return true})
  • router.beforeResolve
  • router.afterEach
  • to 去哪里的路由对象
  • from 从哪里来的路由对象
  • 回调函数返回值:true表示继续进入，false就不允许进入
• 路由独享守卫
  • beforeEnter
• 组件内守卫
  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

十三、命名视图

• 给router-view一个name
• 如果路由匹配的时候要显示多个组件
• 就要给每个组件指定一个router-view的name
• 如果不指定，显示在name叫default的router-view中
• 只显示一个组件:{path:'oneman',component:One}
• 显示多个组件: {path:'threeman',components:{one:One,two:Two,default:Three}}

十四、动态路由

• 如果路由里面有一部分内容必须有,但是内容不是固定的可以写成动态路由
• 语法:{path:‘/user/:name/:pw’, component:one}
• 如果要匹配上面的路由要:: /user/lucy/123456?a=1&b=2
• 如何获取动态路由部分的内容: this.$router.params = {name:“lucy”,pw:“123456”}
• 如何获取路由的查询字符串:this.&route.query = {a:1,b:2}取