码迷，mamicode.com
首页 > 其他好文 > 详细

Vue开发之基础路由

时间：2019-05-19 19:26:34      阅读：99      评论：0      收藏：0      [点我收藏+]

标签：查看   匹配   路由配置   oca   const   rect   too   one   ret   

1.router-link和router-view组件

src/App.vie文件内容：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

在App.vue文件代码里有2个router-link组件和1个router-view组件

router-link组件实际上是封装了一个a标签，里面有一个重要的to属性，to属性指定的值是一个路径
router-link标签中有内容渲染，所以router-link标签有开标签和闭标签
router-view组件是视图渲染组件，通过router-link的to属性加载的组件都会在router-view里被渲染
router-view标签中没有内容渲染，所以router-view标签可以写成 <router-view/> 单标签的形式，这与  <router-view></router-view> 效果相同

router-link的to属性指定的路径就是src/router/router.js文件中定义的路由

import Home from '@/views/Home.vue'         // 引入Home.vue文件并设置引入名称为Home,@标签是在vue.config.js文件中定义的src路径的别名

export default [                // 路由列表是一个数组，在这个数组中定义了路由对象
{                               // 一个基本的路由对象包含path和component这两个属性
        path: '/',              // path属性是在浏览器中输入的跳转路径
        component: Home,        // component属性是指定要加载渲染的组件名称
    }, {
        path: '/about',
        // 这里定义的是懒加载路由，即只有当访问这个路由时，才会加载 src/views/About.vue这个组件
        component: () => import('@/views/About.vue'),       
    }
]

2.路由配置

2.1 动态路由

在src/router/router.js中新建一个路由对象

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        component: Home,
    }, {
        path: '/about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',     // 动态路由
        component:() => import('@/views/argu.vue')
    }
]

在src/views目录中创建argu.vue文件

argu.vue文件内容如下

<template>
    <div>
        {{ $route.params.name }}
    </div>
</template>

<script>
export default {
    
}
</script>

在浏览器中输入URL: http://localhost:8080/#/argu/apple，页面上会渲染URL中对应的参数

技术图片

同样的，当URL改成：http://localhost:8080/#/argu/orange时，页面上渲染的结果也相应改变了

技术图片

在上面的例子里，$route代表的是当前加载页面的路由对象，$route.params代表当前加载页面中的参数对象

所以$route.params.name表示的就是当前加载页面的参数对象中的name对应位置上的的值

不管浏览器的URL中输入的是name值是什么，$route.params.name都会被匹配到

这样就可以起到组件复用，只需要传递不同的参数，同一个页面就可以呈现不同的结果

2.2 嵌套路由

在实际开发中，经常会用到多层嵌套的组件，多层嵌套组件可以通过嵌套路由来完成

修改src/router/router.js文件，新建嵌套路由

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        component: Home,
    }, {
        path: '/about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',         // 嵌套路由
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    }
]

然后在src/views目录下新建parent.vue文件和child.vue文件

parent.vue文件内容如下

<template>
    <div>
        I am parent page
        <router-view/>
    </div>
</template>

<script>
export default {
    
}
</script>

child.vue文件内容如下

<template>
    <div>
        I am child page
    </div>
</template>

<script>
export default {
    
}
</script>

浏览器打开URL：http://localhost:8080/#/parent/child，渲染结果如下

技术图片

2.3 命名路由

修改src/router/router.js文件，为路由命名

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',           // 命名路由
        component: Home,
    }, {
        path: '/about',
        name: 'about',          // 命名路由
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    }
]

修改App.vue文件，在router-link标签中使用name来绑定路由名

<template>
    <div id="app">
    <div id="nav">
        <router-link v-bind:to="{ name:'home'}">Home</router-link> |
        <router-link :to="{ name:'about'}">About</router-link>
    </div>
    <router-view/>
    </div>
</template>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>

v-bind:to 方法可以简写成： :to

使用浏览器访问URL：http://localhost:8080/#/,在页面上点击Home和About标签，可以正常的渲染

2.4 命名视图

如果想在同一个页面上显示多个视图，并分别对不同的视图进行布局时，可以在div标签中定义多个router-view标签，并为每个router-view标签定义名字，这就是命名视图

修改src/App.vue文件，添加两个命名视图view1和view2

<template>
    <div id="app">
    <div id="nav">
        <router-link v-bind:to="{ name:'home'}">Home</router-link> |
        <router-link :to="{ name:'about'}">About</router-link>
    </div>
    <router-view/>
    <router-view name="view1"/>    // 添加router-view标签，并把名字定义为view1
    <router-view name="view2"/>    // 添加router-view标签，并把名字定义为view2
    </div>
</template>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>

然后修改src/router/router.js文件，在新添加的路由中添加两个命名视图

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home,
    }, {
        path: '/about',
        name: 'about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    },{
        path:'/named_view',     // 命名视图
        components:{
            // default会默认加载App.vue中没有命名的视图
            default: () => import('@/views/child.vue'),
            view1: () => import('@/views/view1.vue'),
            view2: () => import('@/views/view2.vue'),
        }
    }
]

然后在src/views目录下添加view1.vue和view2.vue文件

view1.vue文件内容为

<template>
    <div>
        I am view1
    </div>
</template>

view2.vue文件内容为

<template>
    <div>
        I am view2
    </div>
</template>

在浏览器中打开URL；http://localhost:8080/#/named_view

技术图片

在浏览器中安装 Vue Devtool插件，可以看到页面上渲染了3个router-view组件

技术图片

2.5 重定向路由

重定向路由的作用是把当前要访问的URL重定向到另一个URL

修改src/router/router.js文件，添加重定向路由

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home,
    }, {
        path: '/about',
        name: 'about',
        // route level code-splitting
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    },{
        path:'/about_path',     // 重定向路由
        redirect:'about'
    }
]

当使用浏览器访问URL:http://localhost:8080/#/about_path时，就会跳转到路由名为 about的路由上去，即访问了/about路由

在重定向路由中，也可以使用命名路由的方式

即把/about_path修改成使用命名路由的重定向方式

{
    path: '/about_path',
    redirect: {
        name:'about'
    }
}

在重定向的redirect中，也可以传入一个函数

修改about_path路由

{
    path: '/about_path',
    redirect: to => {
        console.log(to) // 打印出传入的to函数
    }
}

浏览器打开URL：http://localhost:8080/#/about_path，在调试样中查看打印出的结果

技术图片

修改about_path路由，在redirect中定义函数体

{
    path: '/about_path',
    redirect: to => {
        return{
            name:'home'
        }
    }
}

刷新浏览器，页面就跳转到home页面了

redirect中定义的to函数也可以返回一个路由路径

{
    path: '/about_path',
    redirect: to => {
        return '/named_view'
    }
}

此时打开URL：http://localhost:8080/#/about_path，页面就会跳转到/named_view页面中

上面redirect中的函数体可以简写成

{
    path: '/about_path',
    redirect: to => '/named_view'
}

2.6 路由别名

路由别名，顾名思义就是为一个路由设置一个别名，设置别名以后即可以通过路由的path的值进行访问，也可以通过别名访问这个路由

修改src/router/router.js文件，为名为"home"的路由设置别名

import Home from '@/views/Home.vue'

export default [
    {
        path: '/',
        name: 'home',
        alias:'/home_page',
        component: Home,
    }, {
        path: '/about',
        name: 'about',
        component: () => import('@/views/About.vue'),
    },{
        path:'/argu/:name',
        component:() => import('@/views/argu.vue')
    },{
        path:'/parent',
        component:() => import('@/views/parent.vue'),
        children:[
            {
                path:'child',
                component:() => import('@/views/child.vue')
            }
        ]
    },{
        path:'/named_view',
        components:{
            default: () => import('@/views/child.vue'),
            view1: () => import('@/views/view1.vue'),
            view2: () => import('@/views/view2.vue'),
        }
    }, {
        path: '/about_path',
        redirect: to => '/named_view'
    }
]

这样不管访问URL：http://localhost:8080/#/，还是URL：http://localhost:8080/#/home_page，都可以访问到指定的视图了

技术图片

技术图片

2.7 JS操作路由

JS操作路由就是通过JS控制页面的跳转和返回

首先修改src/views/Home.vue文件，在页面上添加一个button按钮，button按钮的值为"返回上一页"，button点击事件为"handleClick"

<template>
    <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button @click="handleClick">返回上一页</button>    // 新添加的button按钮
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
    name: 'home',
    components: {
        HelloWorld
    },
    methods:{
        handleClick () {
            this.$router.back()
        }
    }
}
</script>

浏览器打开URL：http://localhost:8080/#/，点击About标签跳转到about页面

技术图片

然后再点击Home标签，跳转到home页面

点击"返回上一页"按钮，页面返回到当前页的上一页，即about页面了

技术图片

返回上一页的JS语句也可以写成：

handleClick () {
    this.$router.go(-1)
}

或者跳转到指定页面：

handleClick () {
    this.$router.push({
        name:'about',
    })
}

跳转到指定页面的同时需要在URL上添加参数时，可以加query选项

handleClick () {
    this.$router.push({
        name:'about',
        query:{
            name:'orange',
            price:'5'
        }
    })
}

在home页点击"返回上一页"时，URL会跳转到about页面，并在URL上添加query中定义的参数

技术图片

跳转到前面定义的/argu这个路由

先在src/router/router.js文件中，为/argu这个路由添加名字

{
    path:'/argu/:name',
    name:'argu',
    component:() => import('@/views/argu.vue')
}

然后修改src/views/Home.vue文件中的handleClick方法

handleClick () {
    this.$router.push({
        name:'argu',
        params:{
            name:'orange',
        }
    })
}

在home页点击"返回上一页"时，URL会跳转到about页面

技术图片

上面的方法也可以用ES6的语法重写，也可以达到同样的效果

handleClick () {
    const name = 'banana'
    this.$router.push({
        path:`/argu/${name}`    // 这里的 ` 是键盘上Ese下面的那个键
    })
}

或者

handleClick () {
    this.$router.push({
        name:`argu`,
        params:{
            name:'banana'
        }
    })
}

在home页点击"返回上一页"时，浏览器页面显示为

技术图片

Vue开发之基础路由

标签：查看   匹配   路由配置   oca   const   rect   too   one   ret   

原文地址：https://www.cnblogs.com/renpingsheng/p/10890325.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！