vue——路由

news2025/1/20 1:45:12

一、介绍路由

1、路由是什么

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

2、为什么要使用路由

3、主要用途

二、安装路由

1、安装命令

2、配置文件

3、在main.js 中进行挂载

三、案例展示

1、案例效果

2、代码展示

3、内容补充

4、几个注意点

一、介绍路由

1、路由是什么

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器（的方法，并传递参数）。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

官方说法：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

2、为什么要使用路由

在传统的web开发中每一个请求地址都会请求服务器来进行处理，但是用户有些操作则无需请求服务器，直接页面端修改下逻辑就能达到目的，在这种方式下最好的方法是使用路由，因为使用路由时，URL会随着改变，用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人，这种方式对于搜索引擎和用户来说都是友好的

3、主要用途

多应用于spa(single page web application)
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

二、安装路由

1、安装命令

npm i vue-router@3

这里需要注意一下，我们的脚手架是有2和3版本的，同样，路由也有不同的版本，现在主要用的是3和4版本，如果我们是vue2的话那就装路由3版本，vue3的话就装4版本。

2、配置文件

（1）我们需要在我们创建的项目中的src根目录创建router目录，在目录中创建                        index.js， 该文件专门用于创建整个应用的路由器

在这文件中写入以下代码

（2）引入vue

        import Vue from 'vue';

（3）导入vue-router

        import VueRouter from 'vue-router'

（4）应用插件

        Vue.use(VueRouter)

（5）创建router规则对象

        const routes = [

        ]

（6）创建router

        const router = new VueRouter({

        routes

        })

（7）导出router

        export default router

3、在main.js 中进行挂载

import Vue from 'vue'
import App from './App.vue'
import router from './router'     //引入router
// Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router                 //挂载router
}).$mount('#app')

当准备好这些，我们就可以开始写我们的代码咯

三、案例展示

（本案例是来自于尚硅谷vue教程中的案例，感兴趣的小伙伴可以去小破站搜索相关视频学习哦）

1、案例效果

根据上面的动态图展示，我不知道小伙伴们有没有发现不同之处，就是我的页面一直在随着我鼠标点击而进行变化，但是并没有进行跳转页面的操作，之前我们实现这样的效果，页面都会刷新和跳转，这就是路由单。页面的好处，不需要一直去加载，去请求，在页面上就能完成跳转。

2、代码展示

App.ve页面h

<template>
   <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link class="list-group-item" active-class="active" to="./about">About</router-link>
          <router-link class="list-group-item " active-class="active" to="./home">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 Banner from './components/Banner'
export default {
  name: 'App',
  components: {
    Banner
  }
}

Home组件

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
    export default {
        name:'Home',
    }
</script>

About组件

<template>
  <h2>我是About的内容</h2>
</template>

<script>
    export default {
        name:'About',
    }
</script>

最最最最重要的文件来了，那就是我们router下面的index.js 文件

import Vue from 'vue';
//导入vue-router
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
//应用插件
Vue.use(VueRouter)

//创建router规则对象
const routes = [
]
//创建router
const router = new VueRouter({
	routes:[
        {path:'/about',component:About },
        {path:'/home',component:Home}
    ]
})

//导出router
export default router

3、内容补充

在代码中我们能看到几个陌生的组件，那他们都是什么意思呢，不要着急，我一个一个来为大家解释

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；就比如我们案例中的点击的时候背景颜色的切换

<router-view>指定展示位置，就是我们路由组件的展示位置

4、几个注意点

（1）路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

（2）通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

（3）每个组件都有自己的$route属性，里面存储着自己的路由信息。

（4）整个应用只有一个router，可以通过组件的$router属性获取到。