Vue路由

路由的概念

  • 后端路由:根据不同URL地址,服务端响应不同的资源。
  • 前端路由:针对于单页面应用来说,根据不同的地址,展示不同的界面,称之为前端路由。

 

 

怎么使用路由

  1. 引入路由的js
  2. 创建路由实例。 new VueRouter
  3. 配置地址和组件的映射关系。 routes
  4. 把路由实例挂载到vue上。 Vue实例上有个router属性
  5. 指定路由到这个地址之后,组件显示的位置<router-view></router-view>
<!DOCTYPE html>
<html>

<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></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--
    
        1. 引入路由脚本,路由的脚本要放在vue脚本的后面
        -->
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <template id="login">
        <div>
            登录组件
        </div>
    </template>

    <script>
        const login = {
            template: "#login"
        }
    </script>


    <template id="register">
        <div>
            注册组件
        </div>
    </template>

    <script>
        const register = {
            template: "#register"
        }
    </script>


    <div id='app'>
        路由测试
        <!-- 5. 在界面上预留一个路由组件渲染的位置 -->
        <router-view></router-view>
    </div>
    <script>

        // 2. 创建路由的实例
        const router = new VueRouter({
            // 3. 配置组件和地址的映射关系
            routes: [
                {
                    path: "/login",
                    component: login
                },
                {
                    path: "/register",
                    component: register
                }
            ]
        })

        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            // 4. 建立路由实例和vue实例的关系。 把路由挂载到vue实例上
            router
        })
    </script>
</body>

</html>

路由重定向

redirect

 const router = new VueRouter({
            // 3. 配置组件和地址的映射关系
            routes: [
                {
                    path: '/',
                    // 把当前地址,重定向指定地址
                    redirect: "/login"
                },
                {
                    path: "/login",
                    component: login
                },
                {
                    path: "/register",
                    component: register
                }
            ]
        })

 

 

路由的跳转

通过router-link设置跳转

  • to: 即将跳转的地址
  • tag: 渲染的标签

 

跳转传参

query参数:

如何传递

通过?拼接参数,多个参数用 &连接

 

如果获取这个参数

this.$route.query.参数名

 

 

params参数(url地址参数)

先定义在使用
    // 使用params传参的化,首先要定义参数
        const router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect: "/list"
                },
                {
                    path: "/list",
                    component: list
                },
                {
                    // 定义了id和name两个参数
                    path: "/detail/:id/:name",
                    component: detail
                }
            ]
        })

 

如何传参

url的指定位置,放置这些参数

/detail/10/名字

这个“10”就作为id

这个“名字”就作为name

 

 

如何获取这个参数

this.$route.params.参数名

 

 

区别

  • params必传,query不传也可以跳转
  • params使用前要先声明,query可以直接使用
  • params是通过this.$route.params获取,query通过this.$route.query获取的

 

 

路由跳转进阶

可以通过对象进行跳转

对象中有以下属性

  • path: 跳转的地址
  • name: 路由的名字
  • params: url参数
  • query: query参数(?后面拼接的参数)
<router-link :to="{path:'/detail',query:{id:item.id,name:item.name}}" tag="li" v-for="item in list"
                    :key="item.id">
        {{item.name}}
</router-link>
// 通过name进行跳转
<router-link :to="{name:'detail',params:{id:item.id,name:item.name}}" tag="li" v-for="item in list"
                    :key="item.id">
        {{item.name}}
</router-link>


      const router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect: "/list"
                },
                {
                    path: "/list",
                    component: list
                },
                {
                    path: "/detail/:id/:name",
                    component: detail,
                  //     声明了name
                    name: "detail"
                }
            ]
        })

 

路由的函数式跳转

当我们需要进行一些业务逻辑之后再跳转的时候,就可以用到函数式跳转

 

this.$router可以进行函数式跳转

  • this.$router.push() 跳转到指定页面
  • this.$router.replace() 这个会替换掉当前界面,当前界面就会从页面栈里被移除
  • this.$router.back() 返回上一级
  • this.$router.go() 跳转到指定的界面

 

 

路由的嵌套写法

对于我们的项目来说,我们大多数情况下,会有一些界面元素是所有界面都包含的,这个时候如果我们在每个界面都写这些元素是很麻烦的,也不利于维护,这个时候,我们就可以把这些页面抽象层界面布局。我们界面布局通过路由嵌套来实现的。

image.png

image.png

 

如何定义

在配置路由的时候通过children这个属性配置当前路由的子路由

const router = new VueRouter({
    rotues:[
    {
        path:"/index",
      component:indexLayout,
      // 指定indexLayout的子路由
      children:[
        {
          // 不加/代表相对路径,完整路径会拼上父路由的路径 /index/list
            path:"list",
          // 这个组件会被渲染在父路由对应的组件的<router-view></router-view>的位置
          component:list
        }
      
      ]
    }
    
  ]

})
  • 怎么访问到它
  • 访问到 它之后,它被放在哪里了

 

 

命名路由

默认情况下一个地址只能对应一个组件,但是有时候可以需要一个地址对应多个组件,这个时候就要用到命名路由

  • component改成components
  • components对应的是一个对象
    • key是路由的名字
    • value是路由对应的组件
  • 设置routerView的时候,可以给routerView指定名字了
    • <router-view name=""></rouer-view>

 

激活路由的样式

  • 被匹配到的路由的router-link上会有个router-link-active的样式,我们通过设置这个样式设置激活标签的样式
  • 被完全匹配到的路由的router-link上会有router-link-exact-active的样式。
  • 指定成特殊的样式
    • 在实例化路由的时候配置
      • linkActiveClass
      • linkExactActiveClass

 

 

路由的元数据

可以给路由设置一些元数据的属性,当我们跳转到这个路由的时候就可以通过$route.meta拿到这些数据

如何设置

const router = new VueRouter({
    routes:[
    {
        path:"地址",
      component:组件,
      meta:{
        元数据
      }
    }
  ]
})

 

怎么获取

this.$route.meta

 posted on 2020-09-13 22:40  wen22  阅读(224)  评论(0编辑  收藏  举报