-
什么是路由
路由就是通过互联网的网络把信息从源地址传输到目的地址的活动
后端渲染:后端把网页渲染好,前端直接展示
后端路由:后端处理URL和页面之间的映射关系
前端渲染:浏览器中显示的网易于中的大部分内容都是由前端的JS代码在浏览器中执行
前端路由:前端管理映射关系 更改URL 页面不需要整体刷新 -
url的hash
目的:更改URL 页面不需要整体刷新 -
HTML5的history
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(数字) 加载 history 列表中的某个具体页面。 -
安装Vue-router
npm install vue-router --save -
在模块中试用vue-router
1.导入路由的一项 调用 Vue.use(VueRouter)
2.创建路由实例,并且传入路由映射配置
3.在Vue实例中挂载创建的路由实例
//router文件夹下的 index.js
import home from '../components/Home' //(引入)
Vue.ues(VueRouter)
const routes=[
//配置
{
path:'',
redirect:'/home'//redirect 重定向 路由默认地址
},
{
path:'/home',
component:home //上面引入的那个名字
}
]
const router = new VueRouter({
routes,
mode:'history' , //把hash模式改成HTML5的history模式(去掉#)
LinkActiveClass:'active' //处于活跃状态的class名
)
// 在app.vue写
<router-link to="/home">啊哈</router-link> //点击这个显示home组件的内容
<router-view></router-view>//点击后的home页面显示在哪
-
router-link补充
to属性:指定跳转路径
tag属性:渲染形式后面接标签(不写默认a标签)
replace属性:不能返回 (直接写replace 内部本来是用history.pushState() 加了这个属性以后试用history.replaceState())
active-class属性:点击后的class名字 -
通过代码的方式修改路径(监听模块点击)
<div id=“app”>
//btn1 不传参的情况
<button @click="btn1click">首页</button>
<button @click="btn2click">关于</button>
</div>
<script>
let app=new Vue({
el:'app',
data:{
},
methods:{
btn1click(){
this.$router.push('/home') //history.pushState() 能返回
console.log("234567890")
},
btn2click(){
this.$router.replace('/about') //history.replaceState() 不能返回
}
}
)}
</script>
- 全局导航守卫
//在router配置的index.js页面中
const routes=[
//配置
{
path:'/home',
component:home, //上面引入的那个名字
meta:{
title:'首页'
}
}
]
//前置首位(guard)跳转前回调 全局的
router.beforeEach((to,from,next) =>{
//从from跳到to
docoment.title = to.matched[0].meta.tltle
//因为有时候存在路由嵌套 所以先拿到matched[0]
next()//必须写
})
- 路由独享守卫
//在router配置的index.js页面中
const routes=[
//配置
{
path:'/home',
component:home, //上面引入的那个名字
beforeEnter:(to,from,next) => {
//跳转之前跑
docoment.title ='首页';
next()//必须写
}
}
]