vue 08

路由的使用

1. 路由的基础使用
   路由：路径和组件的映射关系
   路由的优点：
   整体不刷新页面，用户体验更好
   数据传递容易, 开发效率高
   路由的缺点：
   首次加载会比较慢一点。不利于seo
   路由的使用：
   1、安装vue-router模块包
   yarn add vue-router
   2、导入路由

import VueRouter from 'vue-router'

3、使用路由插件

Vue.use(VueRouter)

4、创建路由规则数组

const routes=[
  {
    path:'/定义名字',
    component:注册的组件名
  }
]

5、创建路由对象-传入规则

const router = new VueRouter({
  routes=routes//需要和上面的路由规则数组一样的
})

6、关联到vue实例

new Vue({
  router, // 路由的实例对象
  render: h => h(App),
}).$mount('#app')

7、在App.vue文件中的使用

//注意，需要有#和/
 <a href="#/定义的名字">点击我就显示注册的组件名</a> 
 //router-view类似于components标签
      <router-view></router-view>

2. 声明式导航
   用于代替a标签

//不需要写#号，to等价于href属性
<router-link to="/定义的名字"></router-link>
 <router-view></router-view>

在页面显示的还是a标签

但是提供了两个高亮功能和类名
类名的区别

//精确匹配 :url中hash值路径, 与href属性值完全相同, 设置此类名
 router-link-exact-active 
 //模糊匹配 :url中hash值, 包含href属性值这个路径
 router-link-active 

3. 重定向和模式设置
   重定向

const router=[
// 页面打开是 /  ，所以页面显示的是空白，想要默认的内容出现，需要重定向，方法如下
  {
    path:"/",
    redirect:"/定义的名字"
  },
  {
    path:'/定义名字',
    component:注册的组件名
  }
]

不存在的页面设置

// 如果访问了没有定义名字的路由，可以使用如下方法提醒
const routes = [
  //这个配置必须放在规则的最后，规则是从前往后逐个比较path
  {
    path: "*",
    component: 注册组件名（这个组件内写提醒的内容）
  }
]

模式设置

const router =new VueRouter({
  routes,
  //取消掉url里面的
  mode:"history"
})

4. 编程式导航

const router=[
  {
    path:"/",
    redirect:"/定义的名字"
  },
  {
    path:'/定义名字',
    name:'通过name定义的名字使用这个组件'，
    component:注册的组件名
  }
]
// 用法
this.$router.push({
    //二选一
    path: "路由路径"
    name: "路由名",
    // 二选一
    query: {
    	"参数名": 值
    }
    params: {
		"参数名": 值
    }
})
//注意事项:path会自动忽略params
//如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由

5. 路由的嵌套和守卫
   路由的嵌套就是在路由规则里面添加子路由规则

const router=[
  {
    path:'/定义名字',
    name:'通过name定义的名字使用这个组件',
    component:注册的组件名,
    //增加children，用法一摸一样
    children:[
      {
        path:'/定义名字',
    name:'通过name定义的名字使用这个组件',
    component:注册的组件名,
      }
    ]
  }
]

全局前置守卫：在路由跳转之前，会执行一次前置守卫函数，来判断是否可以正常跳转

```javascript
// to :往哪里去
// from：从哪里来
// next:是否跳转
router.beforeEach((to, from, next) => {
//进行跳转的判断
  if (to.path === "定义的路径" && 判断条件) {
    alert("提示") //提示相关的信息
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

 6. vant组件库
 vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用
 
[vant官网](https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart)