vue路由入门使用

最新推荐文章于 2024-09-19 07:27:32 发布

浩气长存666

最新推荐文章于 2024-09-19 07:27:32 发布

阅读量1.3k

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/yh604005215/article/details/106033988

版权

后端路由与前端路由

后端路由：应用程序如何去处理不同的url地址发送过来的请求。
前端路由：不同的url地址要渲染不同的页面效果出来。
后端路由与前端路由最本质的一个区别：前端路由只处理 GET 请求。

vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

使用vueRouter

在 Vue 核心之后引入 VueRouter
准备路由页面组件（跟路由相关的组件，就叫做路由页面组件）

components: {
	home: {
	   template: `<h1>home</h1>`,
	}
	...多个
}

定义路由的规则 routes ，是一个数组对象

const routes = [
        // 一个对象就是一条路由规则
        {
          // 每一条规则有一些配置项，主要的是 path 和 component
          //      path - 路由url地址，一般是#号后面的部分
          //      component 使用哪个路由页面组件去渲染，
          //                不能是组件名字的字符串
          //                可以直接提供一个包含组件配置项的对象即可
          //      name  推荐任何组件都设置一个 name 的选项这个选项就是给组件取个名字
          path: "/home",
          name: "home",
          component: home,
        }
        ...多个
]

实例化路由对象, 使用new VueRouter()生成一个 router 实例

const router = new VueRouter({
	routes,
});

实例化Vue根组件时，也就是 new Vue() 的时候，需要配置 router 选项，选型的值就是上一个步骤中生成VueRouter的实例

new Vue({
// 配置一个 router 选项
 router,
});

需要在某个位置，放置一个路由视图（路由坑，就是用来填充匹配的路由页面组件的一个东西），路由视图本身是 VueRouter 提供的一个全局的组件 router-view 这时url地址与某个路由规则匹配时，就会将相应的路由页面组件渲染到这个 router-view 上

    <div id="app">
      <router-view></router-view>
    </div>

路由模式

Vue 中路由有两种不同的模式

hash 模式（默认模式）
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
hisotry 模式
history模式是基于最新的HTML5里面history相关的api进行的一些操作。不过这种模式要玩好，还需要后台配置支持不然会出现404找不到页面这种问题。history模式时，重定向会有些问题，需要页面的名字叫index.html才行。history模式只能兼容到IE10及以上。
在 new VueRouter() 的时候，配置 mode 选项就可以切换模式

const router = new VueRouter({
	// 路由模式，只能从 hash 与 history 中选择一个
	mode: "history",
    routes
});

声明式导航 (用 router-link 来控制路由跳转)

与 router-view 一样，都是引入了 vue-router 之后，提供的全局组件
router-link 的作用就是实现路由的跳转（url的跳转）它本质上就是一个a标签。我们推荐使用它，而不是去用a标签来跳转。
语法：

<router-link to="/home">home</router-link>
to 属性是必须的用来设置点击时跳转到哪里

使用 router-link 就不需要去写 # 号了，它会根据当前路由的模式来决定最终渲染出去的a标签的href属性有没有 # 号。
默认情况下当前的路由地址与某个router-link的to属性匹配时，会给渲染出去的a元素添加上两个 class ，可以使用这两个中的任意一个操作css 样式，这能够更方便的去实现高亮效果。

router-link-exact-active
router-link-active

也可以设置 router-link 组件的 active-class 属性，属性值为某个class名字

希望默认的 router-link-active => active
active-class=“active”
希望默认的 router-link-exact-active => exact-active
exact-active-class=“exact-active”

编程式导航 (用js控制路由跳转)

$router

使用 vue-router 之后，在 vue 的原型上提供了一个 $router 对象，使用这个对象的一些方法来进行路由的跳转。

this.$router.push()
就相当于普通的 router-link 它的参数可以是：
1. 字符串，要跳转到路由的path
2. 对象，对象中配置 path 属性。
this.$router.replace()
就相当于带有 replace 属性的 router-link 它的参数可以是：
1. 字符串，要跳转到路由的path
2. 对象，对象中配置 path 属性。

其余的一些方法

this.$router.back()    =>     后退  history.back()
this.$router.go(num)   =>  前进或后退，根据传递参数是正数还是负数来决定 history.go()
this.$router.forward() =>    前进  history.forward()