前端 の 路由
文章目录
内容概括
- 认识路由
- vue- router基本使用
- vue-router嵌套路由
- vue-router参数传递
- vue-router导航卫守
- keep-alive
一.路由
- 路由映射表,是将内网的 IP 地址映射到 和唯一的 电脑mac 地址对应起来。
- 路由表的本质,就是一个映射表,决定了数据包的指向
1.前端渲染和后端渲染的区别
现在的开发是使用 js+html+css ,但是早期的时候,没有js这种代码。他是通过后端的代码,直接渲染完以后,再传到前端。也就是说他传到前端的,就已经html+css 了。
1. 后端渲染和后端路由:
路由地址和表之间的这种一一对应的关系,是由后端来完成的,这种路由方式称为后端路由。
后端路由是通过后端程序员自己的逻辑 java 或者php ,将数据嵌套在 html 网页之中。
前端渲染(使用了 ajax 以后,就可以通过 js 来访问数据库。)
SPA页面:
spa 单页面富应用
其实,在第一次往静态资源服务器里面,进行请求的时候,就已经把 html + css 的网页给都拿过来了,所以,你每点一次路由的时候,并没有往后端发送任何请求,只是把自己的界面给换了,这种路由,就叫做前端路由。
二.如何改变 url 后,页面不刷新
其中一种技术上通过更改 hash 改变 url ,这个时候,页面不刷新
location.hash='aaa'
三. 配置前端路由
import Vue from 'vue'
//导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 任何插件,都要使用 vue.use(Router)的方法使用。
Vue.use(Router)
// 把 Router 实例导出。
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
四.配置前端路由
import Vue from 'vue'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//导入路由
import Router from 'vue-router'
// 任何插件,都要使用 vue.use(Router)的方法使用。
Vue.use(Router)
// 把 Router 实例导出。
export default new Router({
routes: [
// {
// // path: '/',
// // name: 'HelloWorld',
// // component: HelloWorld
// },
{
path: "/home",
component: Home
},
{
path: "/about",
component: About
}
]
})
认识两个标签:
<router-link to >
是用来指名路由地址的,而 router-view
是路由出口,即用来表示这个路由应该在什么地方显示。
<template>
<div id="app">
<!-- 相当于是一个 a 标签 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 相当于在显示的地方占个位置 -->
<router-view></router-view>
</div>
</template>
五.配置默认路由
如果每次进入网页的时候,都要点击 首页 ,才能跳转到首页,很不方便,所以,应该通过配置路由,让他默认跳转到 首页
在路由里加上这么一个
{
//打开的时候,默认重定向
path: '',
redirect: '/home' //重定向
},
路由地址,在使用的时候,会有一个 # 号健,这是因为 默认使用的是 hash 的方法,我们可以把它改成 history 的方法。代码如下:
在配置路由实例的时候,再多传入一个参数:
六.更改 router-link 的相关属性
默认情况下 ,router-link 是以 a 标签的样式,也可以进行更换,换成 button 等标签。同时可以更改,当点击的时候,颜色的效果,具体代码如下、
<template>
<div id="app">
<!-- 相当于是一个 a 标签 -->
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 点击的时候变颜色 */
.router-link-active{
color: brown;
}
</style>
七. 动态路径参数(动态路由)
首先明确,什么是动态路由,动态路由就是根据每个点击的人的不同,动态的显示路由地址
具体实现,看代码:
1.先构建一个组件:User,把他注册到路由里,注意结构(使用 :来表示)
{
path: "/user/:userId",
component: User
},
2.然后在 APP 显示界面里面,用拼接的方法,让其动态的显示
<template>
<div id="app">
<!-- 相当于是一个 a 标签 -->
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about">关于</router-link>
//动态路由的拼接,是从 data 里面获取数据的
<router-link :to="'/user/'+userId">用户</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
userId:'zhangshan'
}
}
}
</script>
<style>
/* 点击的时候变颜色 */
.router-link-active{
color: brown;
}
</style>
3.在 视图层,让显示的路由,显示出来。
通过注入路由器,我们可以在任何组件内通过 this.$router
访问路由器,也可以通过this.$route
访问当前路由:
<template>
<div>
<h1>我是用户界面</h1>
<p>我是用户界面的内容,哈哈</p>
<!-- 通过下边的 computed 的userId 方法,把路由里面的参数取出来 -->
<h2>{{userId}}</h2>
<!-- 也可以直接拿出来 -->
<h3>{{$route.params.userId}}</h3>
</div>
</template>
<script>
export default {
name: "User",
computed: {
userId() {
// $route 就是拿到当前的处于活跃状态的路由
return this.$route.params.userId;
},
},
};
</script>
<style scoped>
</style>
4.注意:经过本人测试,路由总可以出现汉语的名字
5. 捕获所有的路由和404错误页面
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径,我们可以使用通配符 (*):
当使用通配符路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' }
通常用于客户端 404 错误。如果你使用了History 模式,请确保正确配置你的服务器。
八. 路由的懒加载
当打包构建应用时,Javascript包会变成非常大,影响加载,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由访问的时候,才加载对应的组件,这样就更加的高效了。
代码: (很简单)
只需要路由实例中,模块引入的时候,将上边的写法改成下边的写法即可:
import About from '../components/About.vue'
const About=()=>import('../components/About.vue')
九.嵌套路由
路由的嵌套,是用来表示组件里面嵌套子组件的关系
注意。路由中的 / 这个到底要不要加,是有一定要求的,不是乱加的。
步骤:
- 创建对应的子组件,并在路由映射中配置对应的子路由。
- 路由组件中使用 <router-view>,标签
创建子组件
注意子组件的命名要提现出来父子关系。
在路由中引用组件,代码如下:
const HomeMessage =()=>import("../components/HomeMessage.vue")
const HomeNews =()=>import("../components/HomeNews.vue")
// 任何插件,都要使用 vue.use(Router)的方法使用。
Vue.use(Router)
// 把 Router 实例导出。
export default new Router({
//把更改hash 值得写法,更改为 history 的写法, 就没有了 #
mode: 'history',
routes: [
{
//打开的时候,默认重定向
path: '',
redirect: '/home' //重定向
},
{
path: "/user/:userId",
component: User
},
{
path: "/home",
component: Home,
children:[
{
path:'',
redirect:'news'
},
{
path:'news',
component:HomeNews
},
{
path:'message',
component:HomeMessage
}
]
},
{
path: "/about",
component: About
},]})
添加 <router-view>标签
注意此处的路由要写完整的路由地址:
<template>
<div>
<h2>我是Home,哈哈</h2>
<p>我是内容,哈哈</p>
<br>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
</div>
</template>
十. 全局的导航守卫
该功能的具体作用,是可以利用全局导航守卫,当切换不同的组件的时候,可以在路由上动态的显示组件的名字。
十一. vue-router-keep-alive
理解生命周期,代码如下:
<script>
export default {
name: "Home",
data() {
return {};
},
// 创建的时候调用
created() {
console.log("created");
},
// 销毁的时候,调用
destroyed() {
console.log("destroyed");
},
};
</script>
效果就是当界面发生跳转的时候,会显示不同的生命周期函数,调用对应的函数。
具体要实现的功能: 点完对应的网页以后,再返回来的时候,页面还是保存在刚刚原有的状态上。
直接在 路由展示的标签上加上 <keep-alive>
即可
<keep-alive>
<router-view />
</keep-alive>
十二. 路由传参
<router-link :to="{name:'/test',params: {id: id}}">跳转</router-link>
在子组件里获取
this.$route.params.id
十三. 编程式导航
想要导航到不同的 URL,则使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击<router-link>
时,这个方法会在内部调用,所以说,点击<router-link :to="...">
等同于调用 router.push(...)
。
先创建一个路由
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
通过命名组件传参
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
上面代码和下面是一个意思。
router.push({ name: 'user', params: { userId: 123 }})
router.go(n) 的用法
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)