-
1- 简介
-
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5
history
模式或hash
模式 - 可定制的滚动行为
URL
的正确编码
-
2- 原理
hash
(默认) 单页面程序 每次切换页面是 修改都是#后面的内容history
历史记录back forward go
-
注意:路由模块来实现页面跳转的方式
- 1- 直接修改地址栏
- 2-
router-link
- 3-
$router.push()
-
3- 配置路由器
- 1):下载
npm i vue-router -S
- 2):在
main.js
中引入import VueRouter from 'vue-router';
- 3):使用
vue-router: Vue.use(VueRouter);
- 4):创建路由对象并配置路由规则
- 5):将其路由对象传递给Vue的实例,
options
中加入router:router
- 6):在
app.vue
中展示内容<router-view></router-view>
- 5):将其路由对象传递给Vue的实例,
let router = new VueRouter({ routes:[{path:'/home',component:Home}] });
- 1):下载
-
4- 配置路由
let routes = [ { path:'/', name:'layout', redirect:{name:'index'}, component:'layout', children:[ { path:'/index', name:'index', component:()=>import('../../views/index/index.vue') }, { name:'shop_goods_list' path:'/shop/goods/list', component:'shop/goods/list' } ] }, { path:'/login', name:'login', component:()=>import('../../views/login/index.vue') }, { path:'*', redirect:{name:'index'}, } ]
-
5- 路由传参两种方式
- 1- 声明式
<router-link></router-link>
<router-view></router-view>
- 2- 编程式
this.$router.push()
- 1- 声明式
-
6-
$router
与$route
的区别$route
: 路由信息对象path、params、hash、query、matched、name
- 1)
$route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如"/order"
。 - 2)
$route.params
一个key/value
对象,包含了动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。 - 3)
$route.query
一个key/value
对象,表示URL
查询参数。 例如,对于路径/foo?user=1
,则有$route.query.user
为1, 如果没有查询参数,则是个空对象。 - 4)
$route.hash
当前路由的hash
值 (不带 #) ,如果没有hash
值,则为空字符串。 - 5)
$route.fullPath
完成解析后的 URL,包含查询参数和hash
的完整路径。 - 6)
$route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 - 7)
$route.name
当前路径名字,$router
是“路由实例”对象,即使用new VueRouter
创建的实例,包括了路由的跳转方法,钩子函数等 -
$router.push
和$router.replace
的区别:
- 1)使用
push
方法的跳转会向history
栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。 - 2)使用
replace
方法不会向history
添加新记录,而是替换掉当前的history
记录,即当replace
跳转到的网页后,‘后退’按钮不能查看之前的页面
vue Router 路由
最新推荐文章于 2023-07-17 11:55:37 发布