vue-router的详细介绍使用

最新推荐文章于 2024-08-03 01:38:05 发布

小榴莲爱编程

最新推荐文章于 2024-08-03 01:38:05 发布

阅读量282

点赞数 1

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45773421/article/details/106024218

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是路由？

路由，其实就是指向的意思。例如:当我点击页面上的login按钮时，页面中就要显示login的内容，如果点击页面上的register 按钮，页面中就要显示register 的内容。login按钮 => login 内容， register按钮 => register 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做到正确的对应，比如，我点击login 按钮，页面中怎么就正好能显示login的内容。这就要在js 文件中配置路由。

路由的基本概念

路由中有三个基本的概念： route, routes, router。

route，它是一条路由，由这个英文单词也可以看出来，它是单数， login按钮 => login内容，这是一条route, register按钮 => register 内容，这是另一条路由。
routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{register 按钮 =>register内容 }， { login按钮 => login 内容}]
router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 login 内容，所以页面中就显示了 login 内容。

路由的实现

html模板中

在vue-router中, 我们定义两个标签和来对应点击和显示部分。就是定义页面中点击的部分，定义显示部分，就是点击后，区配的内容显示在什么地方。所以还有一个非常重要的属性 to，定义点击之后，要到哪里去，如：login

js 中配置路由

首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/login’, component: login}

请看下方代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>
          <!-- 使用 router-link 组件来导航. -->
          <!-- 通过传入 `to` 属性指定链接. -->
          <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
          <!-- 如果不想router-link渲染成a标签也可以添加tag属性然他渲染成别的元素 -->
          <router-link to="/login" tag="span">login</router-link>
          <router-link to="/register">register</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
      </div>
    
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 1. 定义 (路由) 组件。
const login = { template: '<div>login</div>' }
const register = { template: '<div>register</div>' }

// 2. 定义路由
const routes = [
  {path: '/', redirect: /login }
  { path: '/login', component: login },
  { path: '/register', component: register }
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
</script>

总结：执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中配置的路径{ path: ‘/login’, component: login} path 一一对应，从而找到了匹配的组件，最后把组件渲染到标签所在的地方。所有的这些实现才是基于hash 实现的。

设置选中路由高亮的两种方式

第一种：
router-link默认会为激活状态的元素添加类名router-link-active，我们只需给给router-link-active添加样式即可
第二种
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

<style>
.myacitve{
	color: red;
}
</style>
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes, // (缩写) 相当于 routes: routes
  linkActiveClass :'myacitve'//这样就会吧默认渲染的router-link-active类名改为myacitve
})

</script>

路由切换的时候添加动画的方法：

1.用transition把routrt-link包起来

<transition mode="out-in">
	<router-view></router-view>
</transition>

2.设置如下的两组类：

.v-enter,
.v-leave-to {
   opacity: 0;
   transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
   transition: all 0.8s ease;
}

路由传参

第一种：通过使用query方式传递参数

<router-link to="/login?id=01&name='cindy'" tag="span">login</router-link>

const login = { 
   template: '<div>{{$route.query.id}}</div>' ,
   created () {
     console.log(this.$route.query.name)
     console.log(this.$route.query.id)
   }
 }

第二种：通过使用params方式传递动态参数

<!-- params -->
<router-link to="/register/02/cindy" tag="span">register</router-link>

const register = { 
    template: '<div>{{this.$route.params.id}}{{this.$route.params.name}}</div>' ,
    created(){
      console.log(this.$route.params.id)
      console.log(this.$route.params.name)
    }
    }

 const routes = [
    { path: '/login', component: login },
    { path: '/register/:id/:name', component: register }
  ]

路由嵌套

<div id="app">
  <router-link to="/acount" tag="span">acount</router-link>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  // 1. 定义 (父路由) 组件。
 <div id="app">
  <router-link to="/acount" tag="span">acount</router-link>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  // 1. 定义 (父路由) 组件。
  const acount = { 
    template: `
    <div>
      <h1>acount</h1>
      <router-link to="/acount/login" tag="span">login</router-link>
      <router-link to="/acount/register" tag="span">register</router-link>
      <router-view></router-view>
      // 注意记得加容器
    </div>
    ` ,
  }
  // 2. 定义 (子路由) 组件。
  const login = { 
    template: '<h1>login</h1>' ,
  }
  const register = { 
    template: '<h1>register</h1>' ,
  }
  

  // 3. 定义路由规则
  const routes = [
    { 
      path: '/acount', 
      component: acount ,
      children:[
        // 注意path前面不要加/
        {path:'login',component:login},
        {path:'register',component:register}
      ]
      },
  ]

  // 4. 创建 router 实例，然后传 `routes` 配置
  const router = new VueRouter({
    routes, // (缩写) 相当于 routes: routes
    linkActiveClass: 'myacitve'
  })

  // 5. 创建和挂载根实例。
  // 记得要通过 router 配置参数注入路由，
  // 从而让整个应用都有路由功能
  const app = new Vue({
    router
  }).$mount('#app')
</script>

命名视图

同时 (同级) 展示多个视图，而不是嵌套展示，如果 router-view 没有设置名字，那么默认为 default

  <'router-view></router-view'>
  <'router-view name="a"></router-view'>
  <'router-view name="b"></router-view'>

对于同个路由，多个视图就需要多个组件。使用 components 配置

  const router = new VueRouter({
    routes: [
      {
        path: '/',
        components: {
          default: Foo,
          a: Bar,
          b: Baz
        }
      }
    ]
  })

以上就是我对vue-router的理解，如有疑问欢迎评论指正！