前端路由和 VueRouter
程序员文章站
2022-03-24 17:56:49
...
前端路由
核心:
改变url
,但页面不进行整体的刷新,即不向后台发请求
如何实现
- 通过修改
hash
方式实现
location.hash
- 通过H5中的
history
实现
history.pushState(data, title, url); //这种方式可以返回之前的页面
history.replaceState(data, title, url); //这种方式无法返回之前的页面,相当于替换
history.go() //通过传入数字进行跳转,数字可为正可为负,为0时相当于调用,即刷新当前页面
history.forward() 相当于 history.go(1)
history.back() 相当于 history.go(-1)
//这三个接口相当于浏览器界面的前进后退键
VueRouter
安装
npm install vue-router --save
引入并使用
//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
设置路由
//index.js
//引入组件
import Home from '../components/Home'
import About from '../components/About'
//定义路由,每个路由对应一个组件
const routes = [
{path: '/', redirect: '/home'}, //重定向路由,默认展示Home组件
{path: '/home', component: Home},
{path: '/about', somponents:About}
]
//创建router实例
const router = new VueRouter({
routes,
mode: 'history', //可以将默认的hash模式转换成history模式,使导航栏更美观
linkActiveClass: 'active' //设置活跃class属性,点击某个路由会添加该class名,显示对应的css效果
})
//暴露router实例
export default router
实现路由跳转
//App.vue
//在根组件中设置
<template>
<div id='app'>
<router-link to='/home'>首页</routet-link>
<router-link to='/about'>关于</routet-link>
<router-view></router-view>
</div>
</template>
- 通过点击
router-link
实现路由跳转,router-link
默认渲染成<a></a>
标签,可以通过设置tag
属性渲染成其它标签,如button、div
等等 - 在
router-link
中设置replace
属性,可将默认的history.pushState
转换成history.replaceState
-
router-view
表示跳转到的组件的显示位置,所有页面的公共部分写在根组件App.vue
中
编程式路由导航
通过普通标签实现路由跳转
//App.vue
<template>
<div id='app'>
<button @click='homeClick'>首页</button>
<button @click='aboutClick'>关于</button>
<router-view></router-view>
</div>
</template>
<script>
name: 'App',
methods: {
homeClick(){
this.$router.push('/home') //history.pushState()方法
},
aboutClick(){
this.$router.replace('/about') //history.replaceState()方法
}
}
</script>
动态路由
动态路由参数使用冒号:标记,当匹配到对应的路由时,参数值会被设置到 this.$route.params
中,可在每个组件内使用
//index.js
const routes = [
{path: '/user/:userId', component: User} //动态路由参数以冒号:开头
]
//App.vue
<template>
<div id='app'>
<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于</router-link>
<!--通过把userId绑定到to属性中,可跳转至对应用户的界面-->
<router-link :to="'/user/' + userId">用户</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
userId: 'jack' //这里用于接收后台传过来的数据
}
},
}
</script>
通过 $route.params.userId
可以得到 userId
的值
//User.vue
<template>
<div>
<p>userId: {{userId}}</p>
</div>
</template>
<script>
export default {
name: 'User',
computed: {
userId(){
return this.$route.params.userId
}
}
}
</script>
路由懒加载
概念: 当打包构建应用时,JS包会变得非常大,影响页面加载,影响用户体验。
所以我们把不同路由对应的组件分割成不同的代码块,当访问某个路由时,再加载该路由对应的组件,这样就提高了效率
实现: 只需修改引入组件时的代码
//index.js
//引入组件,首页一般不需要懒加载
const About = () => import('../components/About')
const User = () => import('../components/User')
路由嵌套
首先在index.js
文件中,注册子组件和配置子路由
// index.js
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const routes = [
{
path: '/',
redirect: '/home' //重定向路由,默认展示Home组件
},
{
path: '/home',
component: Home,
children: [ //嵌套路由,又称子路由
{path: '/', redirect: 'news'},
{path: 'news', component: HomeNews},
{path: 'message', component: HomeMessage}
]
},
{
path: '/about',
somponents:About
}
]
然后在Home.vue
文件中,展示子组件
<template>
<div id="home">
<h2>我是首页</h2>
<router-link to='/home/news'>新闻</router-link>
<router-link to='/home/message'>消息</router-link>
<router-view></router-view>
</div>
</template>
路由传参
一、params
类型,即动态路由传参
- 配置路由格式:
/router/:id
- 传递方式:在
path
后面加上要传的值 - 传递后形成的路径:
/router/user1
、/router/user2
二、'query’类型
- 配置路由格式:
/router
,即普通配置方式 - 传递方式:对象中使用
query
的key
作为传递方式 - 传递后形成的路径:
/router?id=123
、/router?id=abc
在跳转路由的文件中,以对象的方式绑定要传的值
<!--query路由传参-->
<router-link :to="{path: '/profile', query: {name: 'starl', age: 18}}">档案</router-link>
通过$route.query.attribute
取值
// Profile.vue文件
<p>{{$route.query.name}}</p>
<p>{{$route.query.age}}</p>
三、编程式路由导航怎么传参
//App.vue
<template>
<div id='app'>
<button @click='userClick'>首页</button>
<button @click='profileClick'>档案</button>
<router-view></router-view>
</div>
</template>
<script>
name: 'App',
methods: {
//params传参
userClick(){
this.$router.push('/user/' + this.userId) //history.pushState()方法
},
//query传参
profileClick(){
this.$router.replace({
path: '/profile',
query: {
name: 'Starl',
age: 18
}
}) //history.replaceState()方法
}
}
</script>
推荐阅读
-
前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API
-
前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https
-
前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
-
高手教菜鸟破解路由器帐号和密码
-
ios原生开发和前端开发(app原生开发和非原生的区别)
-
[评测视频]新小米路由器1TB和6TB好不好?该选择哪一款?
-
小米路由器被曝劫持HTTP 403和404页面 官方正式回应
-
Vue.js bootstrap前端实现分页和排序
-
vue-router重定向和路由别名的使用讲解
-
在Linux操作系统下修改IP、DNS和路由配置