zoukankan html css js c++ java

vue路由

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

查看全文

相关阅读:
How to create jar for Android Library Project
Very large tabs in eclipse panes on Ubuntu
64bit Ubuntu, Android AAPT, R.java
Linux（Ubuntu）下如何安装JDK
Configure xterm Fonts and Colors for Your Eyeball
建立、配置和使用Activity——启动其他Activity并返回结果
 建立、配置和使用Activity——使用Bundle在Activity之间交换数据
 建立、配置和使用Activity——启动、关闭Activity
建立、配置和使用Activity——Activity
异步任务（AsyncTask）

原文地址：https://www.cnblogs.com/wenaq/p/13663867.html