Vue路由

路由的概念

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

怎么使用路由

引入路由的js
创建路由实例。 new VueRouter
配置地址和组件的映射关系。 routes
把路由实例挂载到vue上。 Vue实例上有个router属性
指定路由到这个地址之后，组件显示的位置<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() 跳转到指定的界面

路由的嵌套写法

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

如何定义

在配置路由的时候通过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 @ 2020-09-14 20:00 靡荼阅读(157) 评论(0) 编辑收藏举报

刷新页面返回顶部

靡荼