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>
  1. 声明式导航
    用于代替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 
  1. 重定向和模式设置
    重定向
const router=[
// 页面打开是 /  ,所以页面显示的是空白,想要默认的内容出现,需要重定向,方法如下
  {
    path:"/",
    redirect:"/定义的名字"
  },
  {
    path:'/定义名字',
    component:注册的组件名
  }
]

不存在的页面设置

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

模式设置

const router =new VueRouter({
  routes,
  //取消掉url里面的
  mode:"history"
})
  1. 编程式导航
const router=[
  {
    path:"/",
    redirect:"/定义的名字"
  },
  {
    path:'/定义名字',
    name:'通过name定义的名字使用这个组件',
    component:注册的组件名
  }
]
// 用法
this.$router.push({
    //二选一
    path: "路由路径"
    name: "路由名",
    // 二选一
    query: {
    	"参数名":}
    params: {
		"参数名":}
})
//注意事项:path会自动忽略params
//如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
  1. 路由的嵌套和守卫
    路由的嵌套就是在路由规则里面添加子路由规则
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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值