Vue基础学习笔记Day06_路由

最新推荐文章于 2022-10-05 13:52:25 发布
最新推荐文章于 2022-10-05 13:52:25 发布
阅读量371 收藏
点赞数
文章标签： vue.js 学习 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li9527999qq/article/details/124573093
版权

今日目标:

  1. 能够了解单页面应用概念和优缺点
  2. 能够掌握vue-router路由系统使用
  3. 能够掌握链接导航和编程式导航用法
  4. 能够掌握路由嵌套和路由守卫
  5. 能够掌握vant组件库基础使用

学习内容：

学习目录:

  1. vue路由简介和基础使用
  2. vue路由 - 声明式导航
  3. vue路由 - 重定向和模式
  4. vue路由 - 编程式导航
  5. vue路由 - 嵌套和守卫
  6. 今日总结
  7. 面试题

知识点自测

  • url的组成部分都有哪些, hash值指的什么

1. vue路由简介和基础使用

1.0 什么是路由

目标: 设备和ip的映射关系

目标: 接口和服务的映射关系

目标: 路径和组件的映射关系

  1. 路由是什么呢?
    1. 路由是一种映射关系（一 一对应的关系）
  2. Vue中的路由是什么?
    1. 路径和组件的映射关系

1.1 为什么使用路由

目标: 在一个页面里, 切换业务场景

  • 具体使用示例: 网易云音乐 https://music.163.com/

  • 单页面应用(SPA): 所有功能在一个html页面上实现 （Single Page Application）

  • 前端路由作用: 实现业务场景切换 （路由的路径切换，改变组件，显示不同内容）

  • 优点：

    • 整体不刷新页面，用户体验更好
    • 数据传递容易, 开发效率高

  • 缺点：

    • 开发成本高(需要学习专门知识)
    • 首次加载会比较慢一点。不利于seo(搜索引擎优化)
  1. 什么是单页面应用?
    1. 所有的业务都在一个页面编写, 只有一个html
  2. 单页面应用好处?
    1. 开发效率高, 用户体验好
  3. 单页面如何切换场景?
    1. 依赖路由切换显示

1.2 vue-router介绍

目标: 如何在Vue项目中集成路由（vue-router）

  • vue-router是一个第三方包，它是vue官方的路由管理器
  • 官网: https://router.vuejs.org/zh/
  • vue-router模块包
    • 它和 Vue.js 深度集成
    • 可以定义 - 视图表(映射规则，路由规则)
    • 模块化的
    • 提供2个内置全局组件
    • 声明式导航自动激活的 CSS class 的链接
    • ……

以后Vue中如何实现路由?

  1. 集成vue-router模块包

1.3 路由 - 组件分类

目标: .vue文件分2类, 一个是页面组件, 一个是复用组件

  • .vue文件本质无区别, 方便大家学习和理解, 总结的一个经验
  • src/views(或pages) 文件夹 和 src/components文件夹
    • 页面组件 - 页面展示 - 配合路由用
    • 复用组件 - 展示数据/常用于复用

总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

  1. 为何把.vue文件分类?
    1. 方便理解和使用
  2. 页面组件用在哪里?
    1. 配合路由, 切换页面
  3. 复用组件用在哪里?
    1. 页面组件, 重复渲染结构一样的标签

1.4 vue-router使用

目标: 学会vue官方提供的vue-router路由系统功能模块使用

  • 例子：点击切换下方a超链接，会打开不同vue界面（路径会变化）

  • 步骤：

    1. 下载vue-router模块到当前工程
    2. 在main.js中引入VueRouter函数
    3. 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
    4. 创建路由规则数组 – 路径和组件名对应关系
    5. 用规则生成路由对象
    6. 把路由对象注入到new Vue实例中
    7. 用router-view作为挂载点, 切换不同的路由页面

  • 具体操作：

  • App.vue - 页面标签和样式准备(可复制继续写)

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
.top {
  padding-top: 62px;
}
</style>

yarn add vue-router
  • 导入路由 （main.js）
import VueRouter from 'vue-router'
  • 使用路由插件（main.js）
// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)
  • 创建路由规则数组（main.js）
import Find from '@/views/Find' // @是src的绝对地址，是一个别名
import My from '@/views/My'
import Part from '@/views/Part'

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]
  • 创建路由对象 - 传入规则 （main.js）
const router = new VueRouter({
  routes
})
  • 关联到vue实例 （main.js）
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
  • components换成router-view
<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      <!-- 7. 设置挂载点-当url的hash值路径切换, 显示规则里对应的组件到这 -->
      <!-- 相当于是一个路由占位 -->
      <router-view></router-view>
    </div>
  </div>
</template>
# 点击发现音乐，地址栏发生改变#/find，
# 然后到main.js的routes路由规则中，进行匹配，匹配到Find组件
# 最后将Find组件显示到router-view这里

总结: 下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

总结2: 一切都围绕着hash值变化为准

1. vue-router本质是什么?
   1. 第三方包, 下载后集成到vue项目中
2. vue-router如何使用?
   1. 下包/引入/注册/规则/路由对象/注入/挂载点
3. 规则如何生效?
   1. 切换url上hash值, 开始匹配规则, 对应组件展示到router-view位置

2. vue路由 - 声明式导航

2.0 声明式导航 - 基础使用

目标: 可用全局组件router-link来替代a标签

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需加#)
  3. router-link提供了声明式导航高亮的功能(自带类名)
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 省略了 其他样式 */
/* 激活时样式 */
.footer_wrap .router-link-active{
  color: white;
  background: black;
}
</style>

总结: 链接导航, 用router-link配合to, 实现点击切换路由

  1. router-link是什么?
    1. VueRouter在全局注册的组件, 本质就是a标签
  2. router-link怎么用?
    1. 当标签使用, 必须传入to属性, 指定路由路径值
  3. router-link好处?
    1. 自带激活时的类名, 可以做高亮

2.1 声明式导航 - 跳转传参

目标: 在跳转路由时, 可以给路由对应的组件内传值

  • 在router-link上的to属性传值, 语法格式如下
    • /path?参数名=值
    • /path/值 – 需要路由对象提前配置 path: “/path/参数名”
  • 对应页面组件接收传递过来的值
    • $route.query.参数名 （接收？传参）
    • $route.params.参数名 （接收路径参数）
  • 具体操作：
  1. 创建views/Part.vue - 准备接收路由上传递的参数和值
<template>
  <div>
      <p>关注明星</p>
      <p>发现精彩</p>
      <p>寻找伙伴</p>
      <p>加入我们</p>
      <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
  </div>
</template>

路由定义：main.js中修改

{
    path: "/part",
    component: Part
  },
  //在/part下增加如下
  {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },

导航跳转, 传值给Part.vue组件

<router-link to="/part?name=小传&age=18">朋友-小传</router-link>
<router-link to="/part/小智">朋友-小智</router-link>

总结:

?key=value 用$route.query.key 取值

/值 提前在路由规则/path/:key 用$route.params.key 取值

  1. 声明式导航跳转时, 如何传值给路由页面?
    1. to=“/path?参数名=值”
    2. to=“/path/值” (需在路由规则里配置/path/:参数名)
  2. 如何接收路由传值?
    1. $route.query.参数名
    2. $route.params.参数名

3. vue路由 - 重定向和模式

3.0 路由 - 重定向

目标: 匹配path后, 强制切换到目标path上

  • 问题：网页第一次打开没有默认的页面？

    • 重定向解决

  • 网页打开url默认hash值是/路径

  • 重定向redirect是设置要重定向到哪个路由路径

  • 例如: 网页默认打开, 匹配路由"/“, 强制切换到”/find"上

//main.js中增加
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
  • 效果：打开/默认路径，会自动跳转到/find

总结: 强制重定向后, 还会重新来数组里匹配一次规则

  1. 如何监测默认路由?
    1. 规则里定义path: ‘/’
  2. 如何重定向路由路径?
    1. redirect配置项, 值为要强制切换的路由路径

3.1 路由 - 404页面

目标: 如果路由hash值, 没有和数组里规则匹配

  • 问题：当你访问一个不存在的界面，会显示什么？
    • 404界面
  • 默认给一个404页面
  • 语法: 所有路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面
  • 具体操作：
  1. 创建views/NotFound.vue页面
<template>
  <img src="../assets/404.png" alt="">
</template>

<script>
export default {

}
</script>

<style scoped>
    img{
        width: 100%;
    }
</style>
  1. 在main.js - 修改路由配置
import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]

总结: 如果路由未命中任何规则, 给出一个兜底的404页面

如何给路由体系里设置404页面?

  1. 在数组最后一个位置, 插入匹配*的规则, 展示404页面

3.2 路由 - 模式设置

目标: 修改路由在地址栏的模式

  • hash路由例如: http://localhost:8080/#/home
  • history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
  • 模式文档
  • 修改main.js，增加mode属性
const router = new VueRouter({
  routes,
  mode: "history" //默认不写是'hash'，不过一般都是默认，演示看过效果，再屏蔽
})

如何修改路由模式呢?

  1. 在实例化路由对象时, 传入mode选项和值修改

4. vue路由 - 编程式导航

用JS代码跳转, 是编程式导航

用a标签跳转，是声明式导航

4.0 编程式导航 - 基础使用

目标: 用JS代码来进行跳转

  • 语法: 用path/name任选一个
this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})
  • 具体操作：
  1. main.js - 路由数组里, 给路由起名字
{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},
  1. App.vue - 换成span 配合js的编程式导航跳转
<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

JS如何切换路由路径?

  1. this.$router.push()配置path/name
  2. 要和路由规则数组里对应

4.1 编程式导航 - 跳转传参

目标: JS跳转路由, 传参

  • 语法 query / params 任选 一个

  • 格外注意: 使用path会自动忽略params

  • 具体操作：

  • App.vue

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="oneBtn">朋友-小传</span>
      <span @click="twoBtn">朋友-小智</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    },
    oneBtn(){
      this.$router.push({
        name: 'Part',// /part/小传
        params: {
          username: '小传'
        }
      })
    },
    twoBtn(){
      this.$router.push({
        name: 'Part', // /part?name=小智
        query: {
          name: '小智'
        }
      })
    }
  }
};
</script>

JS切换路由如何传值, 如何接收值?

  1. path+query传, $route.query接
  2. name+params传, $route.params接

5. vue路由 - 嵌套和守卫

5.0 vue路由 - 路由嵌套

目标: 在现有的一级路由下, 再嵌套二级路由

  • 二级路由示例-网易云音乐-发现音乐下

Find.vue

<template>
  <div>
     <p>推荐</p>
    <p>排行榜</p>
    <p>歌单</p>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.nav_main {
  background-color: red;
  color: white;
  padding: 10px 0;
}
.nav_main a {
  text-align: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
  margin: 7px 17px 0;
  padding: 0px 15px 2px 15px;
  height: 20px;
  display: inline-block;
  line-height: 20px;
  border-radius: 20px;
}
.nav_main a:hover {
  background-color: brown;
}
.nav_main .router-link-active{
  background-color: brown;
}
</style>

My.vue

<template>
  <div>
      <p>我的收藏</p>
      <p>我的历史记录</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

二级界面-Ranking.vue

<template>
  <div>
      <p>飙升排行榜</p>
      <p>新歌排行榜</p>
      <p>热歌排行榜</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

二级界面-Recommend.vue

<template>
  <div>
      <p>新歌推荐</p>
      <p>新碟上架</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

二级界面-SongList.vue

<template>
  <div>
      <p>纯音乐</p>
      <p>超级温柔的音乐</p>
      <p>车载低音炮</p>
      <p>loft-复古音乐</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
  • 继续操作：
  1. 修改在Find.vue中，增加二级导航，已经占位的router-view
<template>
  <div>
    <!-- <p>推荐</p>
    <p>排行榜</p>
    <p>歌单</p> -->
    <div class="nav_main">
      <router-link to="/find/recommend">推荐</router-link>
      <router-link to="/find/ranking">排行榜</router-link>
      <router-link to="/find/songlist">歌单</router-link>
    </div>

    <div style="1px solid red;">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.nav_main {
  background-color: red;
  color: white;
  padding: 10px 0;
}
.nav_main a {
  text-align: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
  margin: 7px 17px 0;
  padding: 0px 15px 2px 15px;
  height: 20px;
  display: inline-block;
  line-height: 20px;
  border-radius: 20px;
}
.nav_main a:hover {
  background-color: brown;
}
.nav_main .router-link-active{
  background-color: brown;
}
</style>
  1. 配置路由规则-二级路由展示
const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]
  1. 说明：
  • App.vue, 外层的router-view负责发现音乐和我的音乐页面切换
  • Find.vue 内层的router-view负责发现音乐下的子tab对应的组件切换
  1. 运行 - 点击导航观察嵌套路由在哪里展示

总结: 嵌套路由, 找准在哪个页面里写router-view和对应规则里写children

router-link，router-view，写在父级组件中

路由规则，写到父级路由规则的children中

  1. 二级路由如何配置?
    1. 创建需要的二级页面组件
    2. 路由规则里children中配置二级路由规则对象
    3. 一级页面中设置router-view显示二级路由页面
  2. 二级路由注意什么?
    1. 二级路由path一般不写根路径/
    2. 跳转时路径要从/开始写全

5.1 声明导航 - 类名区别

目标: router-link自带的2个类名的区别是什么

  • 观察路由嵌套导航的样式

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

  • ‘#/find/recommend’ 与 ‘#/find’ 模糊匹配 ， 增加router-link-active

  • ‘#/find/recommend’ 与 ‘#/find/recommend’ , 精准匹配增加router-link-exact-active

自动添加的2个类名的区别?

  1. router-link-exact-active – url的hash值和href完全匹配
  2. router-link-active – url的hash值包含href路径值匹配

5.2 全局前置守卫

目标: 路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转

  • 使用例子: 在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面
  • 语法： router.beforeEach((to, from, next) => {})
  1. 在路由对象上使用固定方法beforeEach
// 目标: 路由守卫
// 场景: 当你要对路由权限判断时
// 语法: router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
// 参数1: 要跳转到的路由 (路由对象信息)    目标
// 参数2: 从哪里跳转的路由 (路由对象信息)  来源
// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地

// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

总结: next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转

什么是路由守卫?

  1. 路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由

补充知识

vant组件库

vant官网

今日总结

  • 了解什么是单页面SPA应用, 以及优缺点
  • 了解组件分为哪2类 views/components
  • 路由的本质是什么, 就是改变url的hash值, 让js监听到, 根据配置好的映射规则, 显示不同的DOM
  • 声明式导航router-link是vue-router封装注册的全局组件, 比a标签好处是封装了高亮类名等
  • 编程式导航, 用Vue内置的方法改变浏览器url, this.router.push() this.router.go() this.$router.back()
  • 路由跳转传参总结
跳转方法传参位置路由规则接收
<router-link to="/path?key=value"></router-link>/path?key=value无特殊$route.query.key
<router-link to="/path/值"></router-link>/path/值/path/:key$route.params.key
this.$router.push({path: “/path”, query: {key: value}})query的对象无特殊$route.query.key
this.$router.push({name: “com”, params: {key: value})params的对象路由规则需要name属性$route.params.key(注意,这种在内存中保存)
  • 无论哪种格式, 声明式和编程式都是通用的, 保证路径和参数格式正确就ok
  • 路由重定向, 在配置项上使用redirect到目标路由路径
  • 嵌套路由就是在某个一级页面中, 在嵌套一套路由切换系统
    • 在路由规则里找到一级路由, 写children: [] 注意: 除了第一层一级路由path写/, 子的开头都无需/
    • 跳转时, 要去的路由路径从一级开始写
    • 心中要做到 浏览器url 路由值 和路由规则里的path 对上即可
  • 全局路由前置守卫 - 可以在跳转路由前进行一些权限判断 beforeEach
  • vant组件库是封装好的组件, 我们拿来即可使用

面试题

1. 路由之间是怎么跳转的？有哪些方式

1、<router-link to="需要跳转到页面的路径">

2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

2. vue-router怎么配置路由

在vue中配置路由分为5个步骤，分别是：

  1. 引入vue-router.js
  2. 配置路由path和组件, 和生成路由对象
  3. 把路由对象配置到new Vue中router选项下
  4. 页面使用 承载路由
  5. 设置路由导航(声明式导航方式/编程式跳转)

3. vue-router的钩子函数都有哪些

关于vue-router中的钩子函数主要分为3类

全局钩子函数要包含beforeEach

beforeEach函数有三个参数,分别是:

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。

单独路由独享组件

beforeEnter,

组件内钩子

beforeRouterEnter，
beforeRouterUpdate,
beforeRouterLeave

4. 路由传值的方式有哪几种

Vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航

router.push

字符串：直接传递路由地址，但是不能传递参数

      this.$router.push("home")

对象：

  命名路由  这种方式传递参数，目标页面刷新会报错 - name+params

           this.$router.push({name:"news",params:{userId:123})

  查询参数  和path配对的是query

           this.$router.push({path:"/news',query:{uersId:123}) 

  接收参数  this.$route.query

声明式导航

  字符串 <router-link to:"news"></router-link>

  命名路由 <router-link :to:"{name:'news',params:{userid:1111}}"></route-link>

  还可以to="/path/值" - 需要提前在路由 规则里值 /path/:key

  查询参数 <router-link :to="{path:'/news',query:{userId:1111}}"></router-link>

   还可以to="/path?key=value

5. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

动态路由指的就是path路径上传智, 前提需要路由规则了提前配置/path/:key名, 可以写多个用/隔开, 获取使用$route.params.key名来提取对应用路径传过来的值

6. Vue的路由实现模式：hash模式和history模式（必会）

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

7. 请说出路由配置项常用的属性及作用（必会）

路由配置参数：  

  path : 跳转路径
  component : 路径相对于的组件
 name:命名路由
 children:子路由的配置参数(路由嵌套)
 props:路由解耦
 redirect : 重定向路由

8. 编程式导航使用的方法以及常用的方法（必会）

路由跳转 ： this.router.push()
路由替换 : this.router.replace()
后退： this.router.back()
前进 ：this.router.forward()

9. Vue如何去除URL中的#（必会）

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一种模式 history：new Router ({ mode : 'history', routes: [ ]})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 “404” 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 “index.html” 页面。

10. 说一下你在vue中踩过的坑（必会）

1、第一个是给对象添加属性的时候，直接通过给data里面的对象添加属性然后赋值，新添加的属性不是响应式的

【解决办法】通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2、 在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载

【解决办法】通过：Vue.nextTick(回调函数进行获取)

11. route和router的区别？

route是路由信息对象，包括‘path，hash，query，fullPath，matched，name’等路由信息参数；
router是路由实例对象，包括了路由的跳转方法，实例对象等

子木睡觉了
关注
路由_vant组件库使用
m0_50125215的博客
06-20 1557
知识点自测 url的组成部分都有哪些, hash值指的什么 今日学习目标 能够了解单页面应用概念和优缺点 能够掌握vue-router路由系统使用 能够掌握链接导航和编程式导航用法 能够掌握路由嵌套和路由守卫 能够掌握vant组件库基础使用 1. vue路由简介和基础使用 1.0 什么是路由 目标: 设备和ip的映射关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00fCeVlI-1624155066950)(images/image-20210512095
【Vue】Vue2.0+Vue3.0学习笔记day12（路由）
weixin_58214412的博客
01-17 679
目录 117.路由的简介 118.路由的基本使用 119.几个注意点 120.嵌套（多级）路由 121.路由的query参数 122.命名路由 123.路由的params参数 124.路由的props配置 125.router-link的replace属性 126.编程式路由导航 127.缓存路由组件 128.两个新的生命周期钩子 129.全局前置路由守卫 130.全局后置路由守卫 131.独享路由守卫 132.组件内路由守卫 133.history模式与hash模式 134.element-ui基本
2021-05-25
zhouzhou1994的博客
05-25 139
1，什么是路由 解释路由器的概念，首先得知道什么是路由。所谓“路由”，是指把数据从一个地方传送到另一个地方的行为和动作，而路由器，正是执行这种行为动作的机器，它的英文名称为Router,是一种连接多个网络或网段的网络设备，它能将不同网络或网段之间的数据信息进行“翻译”，以使它们能够相互“读懂”对方的数据，从而构成一个更大的网络。 1.1 为什么使用路由 目标: 在一个页面里, 切换业务场景 优点： 整体不刷新页面，用户体验更好 数据传递容易, 开发效率高 缺点： ...
Vue最low的路由嵌套【电竞杜小帅】
qq_45752502的博客
07-04 242
1.首先创建一个vue的项目 如果不知道vue项目环境搭配可以看我上一篇博客链接: link 2.打开创建的vue项目 2.1在components包(也可以在其他地方创建vue文件等会会提到)下面创建两个page.vue文件，下面的三步操作只是为了等会跳转的时候有变化就用了三个vue文件，自己有vue文件的可以跳过。 2.2可以将helloworld文件清空只留下模板 。hellowold.vue文件修改后的代码 <template> <div class="hello">
配置子路由
qq_41979331的博客
06-24 383
1.单独路由界面（例如：router/other.js） export default [ // 登录页面 { path: "/", name: "login", component: () => import("@/views/login"), meta: { title: "登录" } }, // 首页 { path: "/home", name: "home", component: () =>
vue：基础：路由
1363648943的专栏
09-05 2345
vue路由、watch、router
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它...从基础的声明式渲染到复杂的组件系统和路由管理，Vue提供了一个全面的解决方案，适用于从小到大的各种项目。对于初学者来说，逐步理解并实践这些概念是掌握Vue的关键步骤。
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
qq_48687155的博客
07-26 554
动态组件，插槽，自定义指令，tabbar案例
前端学习笔记____Vue2+Vue3全家桶
weixin_55181759的博客
08-09 7246
前端学习笔记____Vue2+Vue3全家桶前言第一部分 VUE基础一、Vue简介1. Vue是什么?2. Vue发展历史3. Vue的特点二、初识Vue1. Vue模板语法2. 数据绑定▲单向数据绑定v-bind▲ 双向数据绑定v-model3. el与data的两种写法▲ el的两种写法▲ data的两种写法4. MVVM模型5.数据代理6. 事件处理▲ 事件处理v-on▲ 事件修饰符▲ 键盘事件key7. 计算属性computed与监视(侦听)属性watch▲ 计算属性－computed▲ 监视(侦听
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
Vue组件集成Vue-router嵌套路由
m0_46322755的博客
04-30 642
vue组件集成vue-router嵌套路由
还不知道router-view中的key=‘$route.fullPath‘吗
最新发布
...
10-05 3026
router-view中的key='$route.fullPath'
vue-router如何响应路由参数的变化（watch监听|导航守卫）
wenmin1987的博客
09-26 6432
什么是路由参数的变化 当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 监测路由参数变化的方法（watch监听|导航守卫） 方法一watch监听： watch: { // watch的第一种写法 $route (to, from) { console.log(to) console.log(from) } }, wa...
Vue中监听地址栏路由改变
oops
08-14 631
Vue中监听地址栏（路由）改变 有时在遇到需要跳转子路由时让当前父路由隐藏，子路由显示可使用 watch: { // 监听地址栏改变 // to 可获取到哪去的地址 // from 可获取到从哪来的地址 $route(to, from) { if (to.fullPath.includes("search")) { this.flag = true; } else { this.flag = fal
vue常见问题汇总（二）：Vue监听路由变化
weixin_46513664的博客
04-18 191
本仙女亲测有效： 只需要在App.vue文件的router-view标签中加上:key="$route.fullPath"即可
Vant-UI库和Element-UI库修改样式无效
皮皮的博客
07-10 1600
Vant-UI库和Element-UI库修改样式无效 最近用vue写页面时，发现使用vant的有些UI组件，而又不能满足自己的样式，修改CSS样式还是无效。css一般都会使用sass或者less，加了scoped后修改的样式不起作用，即使加了important也没用 .van-grid-item_content{ background:#f4f5f7 !important; border-radius:8px; } vue项目中，当style标签有scoped属性时，它的 CSS 样式只作用
vant Grid组件图片加载问题 无法加载本地图片解决方案
m0_62876802的博客
07-22 1487
我们引入图片直接用官网给的icon来加载案图片。然后我们图片地址得用require包一下。
圆角图片实现
thm的专栏
08-13 815
今天做项目时需要实现圆角图片的效果，类似这样的效果： 经过网上搜索资料后，了解Android  PorterDuff及Xfermode，首先看一下效果图(来自ApiDemos/Graphics/XferModes)： 从上面我们可以看到PorterDuff.Mode为枚举类,一共有16个枚举值: 1.PorterDuff.Mode.CLEAR
用vant为基础组件，做的一个电影小程序-主页，接口数据爬的猫眼的数据
m0_61084402的博客
04-15 878
因为用的是猫眼的数据，算是一个仿猫眼小程序的项目，项目没有做的很完善，主要因为爬到的数据有限。项目包括主页、电影详情、影院列表、影院详情、票房、我的。这篇先讲主页吧。 先说下用到的技术： 首先是vant组件库。。。好像也没别的了 说下接口吧： 热映的api：https://m.maoyan.com/ajax/movieOnInfoList 即将上映的api：https://m.maoyan.com/ajax/comingList?ci=10&token=&limit=10 搭..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值