前端的核心是监听hash地址的变化使用 window.onhashchange() location.hash
created(){
window.onhashchange = ()=> {
console.log("监听到了hash地址",location.hash);
switch(location.hash){
case '#/home':
this.comName='Home'
break
case '#/movie':
this.comName='Movie'
break
case '#/about':
this.comName='About'
break
}
}
}
当元素创建了,就监听hash值的变化,然后进行判断并赋值,最后渲染元素
在src创建一个router/index.js文件,`import Vue from ‘vue’
import App from ‘./App.vue’
// 拿到实例对象
import router from ‘./router/index’
// 导入 bootstrap 样式
import ‘bootstrap/dist/css/bootstrap.min.css’
// 全局样式
import ‘@/assets/global.css’
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router:router
}).$mount(’#app’)
然后就把模块引入main.js(引入实例对象)
new Vue({
render: h => h(App),
router:router
}).$mount(’#app’)
把Vuerouter实例对象放入vue实例之中之中
总结:在创建vue-cli的时候,勾选router的时候,会帮我们创建一个router/index.js文件及其相关代码
--------------------分隔线-------------------------------
在APP2.vue中提供
const router = new VueRouter({
// 数组,作用:定义hash地址与组件的对应关系
routes: [
//路由规则
{path:’/’,redirect:’/home’},//路由重定向,在进来的时候进入指定的路由规则,不会空空的
{ path: ‘/home’, component: Home },
{ path: ‘/home’, component: Home },
{ path: ‘/movie’, component: Movie },
{ path: ‘/about’, component: About }
]
})
-----------------分隔线--------------------
vue-router不仅提供了router-view,还提供了router-link,这是在编码的时候一个替代a链接的东西,但是在检查的时候还是a链接,to是一个href vue首页 首页
子路由的定义
在子路由
About 组件
tab1 tab2{
path: ‘/about’,
component: About,
children: [
{ path: ‘tab1’, component: Tab1 },
{ path: ‘tab2’, component: Tab2 },
// 默认子路由
],redirect: ‘/about/tab1’//默认子路由
}
用于获取网址的参数用
console.log(this.$route.params.id);//id是参数
$route.params.path
$route.params.fullPath
$route.params.matched 获取路由当前和子路由
routes: [
{ path: ‘/movie/:id’, component: Movie, props: true }
] 开启props传值可以传送到组件之中,在组件进行接收props进行使用
http://localhost:8080/#/movie/1?naem=zs&age=21
/movie/1在hash地址中是路径参数,
?naem=zs&age=21在hash地址中是查询参数
this.$route.fullpath是hash地址带参数的,path是hash地址不带查询参数的
hash地址中/后面的是路径参数,this.KaTeX parse error: Expected 'EOF', got '&' at position 50: …取路径参数的 ?name=zs&̲age=21后面的是查询参数,…route.query是查询参数
在路径之中,fullpath是hash地址带参数的,path是hash地址不带参数(部分路径)的
声明式与编程式导航
a,vue-router是声明式导航
this.
r
o
u
t
e
是
"
参
数
式
编
程
"
,
是
u
r
l
上
的
u
r
l
的
参
数
,
t
h
i
s
.
route是"参数式编程",是url上的url的参数, this.
route是"参数式编程",是url上的url的参数,this.router是"导航式编程",因为里面有很多导航式api
编程式导航,是放在methods里面的是一个方法,也可以这样子
<button @click="$router.back()">后退
this.$router.push("")里面是放hash地址,会修改本页的hash地址进行跳转,并增加一条记录
this. r o u t e r . r e p l a c e ( " " ) 里 面 是 放 h a s h 地 址 , 会 修 改 本 页 的 h a s h 地 址 进 行 跳 转 , 会 覆 盖 记 录 1. 在 路 由 获 取 参 数 , 之 后 进 行 传 递 到 组 件 之 中 2. t h i s . router.replace("")里面是放hash地址,会修改本页的hash地址进行跳转,会覆盖记录 1.在路由获取参数,之后进行传递到组件之中 2.this. router.replace("")里面是放hash地址,会修改本页的hash地址进行跳转,会覆盖记录1.在路由获取参数,之后进行传递到组件之中2.this.route.params.参数
{ path: ‘/movie/:id?’, component: Movie, props: true },
{{id}}
前端守卫
router.beforeEach((to, from, next) => {
next()// 可以通过
console.log(to) // 到达的组件
console.log(from) //之前的组件
})
11-27
从一个页面到另一个页面是通过url传输的
第一种是 this.$router.push()
第二种是 传值
把:id传到组件之中的,在组件里面用props:[‘id’]接收
:id 是在index.js才可以使用的,路由规则
是阻止a链接的作用的prevent 详情
pathArr.js
export default [’/home’, ‘/home/users’, ‘/home/goods’, ‘/home/goods/’, ‘/home/orders’, ‘/home/setting’, ‘/home/info/’]
<Swiper :items="imgList"></Swiper>
data () {
return {
imgList: [{ id: 1, src: 'https://img2.baidu.com/it/u=1308964894,427693321&fm=26&fmt=auto' },
{ id: 2, src: 'https://img1.baidu.com/it/u=3325673457,2271295441&fm=26&fmt=auto' }]
}
},
index.js
router.beforeEach(function(to, from, next) {
if (pathArr.indexOf(to.path) !== -1) {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})
- main.js是处理vue组件与html页面的文件,可以用来注册Vue原型对象
- 在模块化中,给定的文件夹下面不给具体文件,那么就是index.js
import router from ‘./router’
import router from ‘./router/index.js’