vue router 配置路由的方法

网络编程 2024/9/24 佚名

3 1 2

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

路由的基本实现

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  /* 实现当前 路由导航高亮 */
  .router-link-exact-active, .router-link-active {
   color: red;
   font-size: 30px;
  }
 </style> 
</head>

<body>
 <div id="app">
  <!-- 路由的入口，也就是a标签 -->
  <router-link to="/home">home</router-link>
  <router-link to="/about">about</router-link>

  <!-- 指定页面中路由的出口，也就是：路由匹配组件将来展示在页面中的位置 -->
  <router-view></router-view>
 </div>

 <script src="/UploadFiles/2021-04-02/vue.js">

重定向
解释：将 / 重定向到 /home


{ path: '/', redirect: '/home' }


路由导航高亮
说明：当前匹配的导航链接，会自动添加router-link-exact-active router-link-active类
路由参数

  说明：我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，此时，可以通过路由参数来处理
  语法：/user/:id
  使用：当匹配到一个路由时，参数值会被设置到 this.$route.params
  其他：可以通过 $route.query 获取到 URL 中的查询参数 等



// 链接：
<router-link to="/user/1001">用户 Jack</router-link>
<router-link to="/user/1002">用户 Rose</router-link>

// 路由：
{ path: '/user/:id', component: User }

// User组件：
const User = {
 template: `<div>User {{ $route.params.id }}</div>`
}




嵌套路由 - 子路由

  Vue路由是可以嵌套的，即：路由中又包含子路由
  规则：父组件中包含 router-view，在路由规则中使用 children 配置



// 父组件：
const User = Vue.component('user', {
 template: `
  <div class="user">
   <h2>User Center</h2>
   <router-link to="/user/profile">个人资料</router-link>
   <router-link to="/user/posts">岗位</router-link>
   <!-- 子路由展示在此处 -->
   <router-view></router-view>
  </div>
  `
})

// 子组件：
const UserProfile = {
 template: '<h3>个人资料：张三</h3>'
}
const UserPosts = {
 template: '<h3>岗位：FE</h3>'
}

{ path: '/user', component: User,
 // 子路由配置：
 children: [
  {
   // 当 /user/profile 匹配成功，
   // UserProfile 会被渲染在 User 的 <router-view> 中
   path: 'profile',
   component: UserProfile
  },
  {
   // 当 /user/posts 匹配成功
   // UserPosts 会被渲染在 User 的 <router-view> 中
   path: 'posts',
   component: UserPosts
  }
 ]
}




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue,配置路由,vue,router,配置路由

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“vue router 配置路由的方法”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

vue router 配置路由的方法

解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）

vue+webpack模拟后台数据的示例代码

评论“vue router 配置路由的方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接