【Vue2.0学习】—路由(六十五)

简介: 一个路由(route)就是一组映射关系,多个路由需要路由器进行管理

【Vue2.0学习】—路由(六十五)

一、路由

  • 理解:一个路由(route)就是一组映射关系,多个路由需要路由器进行管理
  • 前端路由:key是路径, value是组件

二、基本使用

  • 安装vue-router,命令:npm i vue-router
  • 应用插件:Vue.use(VueRouter)
  • 编写router配置项
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//创建并暴露路由
export default new VueRouter({
    routes: [{
        path: '/about',
        component: About
    }, {
        path: '/home',
        component: Home
    }]
})
  • 实现切换:active-class可配置高亮显示

2345_image_file_copy_36.jpg

  • 指定展示的位置: 

2345_image_file_copy_37.jpg

Demo演示:

<template>
   <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
            <!-- Vue中借助router-link实现标标签的跳转 -->
          <router-link class="list-group-item" to="/about" active-class="active">About</router-link>
          <router-link class="list-group-item" to="/home"  active-class="active">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定组件呈现的位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import Home from './components/Home.vue'
    import About from './components/About.vue'
    export default {
        name: 'App',
        components: {
            Home,
            About
        }
    }
</script>
<style>
</style>
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//创建并暴露路由
export default new VueRouter({
    routes: [{
        path: '/about',
        component: About
    }, {
        path: '/home',
        component: Home
    }]
})
//该文件是整个项目的入口文件
//引入Vue
import Vue from 'vue'
//引入APP组件,它是所有组件的父组件
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
// 关闭Vue生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)
//将APP组件放入容器中
new Vue({
    render: h => h(App),
    router
}).$mount('#app')

2345_image_file_copy_38.jpg

2345_image_file_copy_39.jpg

三、几个注意点

  • 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
  • 通过切换,隐藏了路由组件,默认是被销毁的,需要的时候再去挂载。
  • 每个组件都有自己的$route属性,里面存储着自己的路由信息。
  • 整个应用只有一个router,可以通过组件的$router属性获取到。

四、嵌套(多级)路由

2345_image_file_copy_40.jpg

2345_image_file_copy_41.jpg

跳转(要写完整的路径):

 <router-link class="list-group-item active" active-class="active" to="/home/message">Message</router-link>

五、路由传参

2345_image_file_copy_42.jpg

2345_image_file_copy_43.jpg

六、路由命名

作用:简化路由的跳转

如何使用?

2345_image_file_copy_44.jpg

简化跳转

2345_image_file_copy_45.jpg

七、路由的params参数

2345_image_file_copy_46.jpg

传递参数

2345_image_file_copy_47.jpg

注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用 name配置。

接收参数:

$route.params.id
$route.params.title

八、的replace属性

  • 作用:控制路由跳转时操作浏览历史记录的模式
  • 浏览器的历史记录有两种写入方式:分别是push和replace,push是追加历史记录,replace是替换当前记录,路由跳转的时候默认为push
  • 如何开始replace模式:News
相关文章
|
11天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
24 3
|
19天前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
19天前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
416 0
|
20天前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
130 1
|
2月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
26天前
|
JavaScript 前端开发 UED
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
9天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
34 0
|
1月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
35 2