150Vue-Router路由概述+基本使用router-view占位符+重定向redirect

最新推荐文章于 2023-08-14 20:06:19 发布

教练我真的想敲代码

最新推荐文章于 2023-08-14 20:06:19 发布

阅读量4.3k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/gy_9543/article/details/107891718

版权

本文介绍了Vue Router的基本概念，包括其作为Vue官方的路由管理器的特性，如支持H5历史模式、嵌套路由和编程式导航等。重点讲述了Vue Router的使用步骤，特别是如何通过路由重定向设置页面默认展示组件。

摘要由CSDN通过智能技术生成

Vue Router简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA斜体样式(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性：

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

4.Vue Router的使用步骤(★★★)

A.导入js文件
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
B.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，
to属性的值会被渲染为#开头的hash地址
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

在这里插入图片描述

C.添加路由填充位（路由占位符）
<router-view></router-view>

在这里插入图片描述

D.定义路由组件
var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

在这里插入图片描述

E.配置路由规则并创建路由实例
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

在这里插入图片描述

F.将路由挂载到Vue实例中
new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

在这里插入图片描述

<!DOCTYPE html>
<html <

最低0.47元/天解锁文章

教练我真的想敲代码

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录