这是刚入门vue的第五天,刷视频整整刷了100多p,过程是艰辛的。但收获了很多东西,
下面是整理的一些学习笔记,做个记录
首先是带参数代码跳转方法
go(){
// 带参数跳转
this.$router.push({
path:’/p2′, 需要跳转到的路劲
query:{ // 跳转时携带的query数据
name:’首页’,
age:’18’,
sex:’女’,
}
})
},
传递了参数肯定是要接收的,
接收就比较简单了,
{{$route.query}}
这样就可以接收到整个query对象了,
{{$route.query.name}}
这样可以选取到name的value
还是挺简单的,学过一点后端,感觉vue对后端人员还是很友好的。转化很快
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
const routes = [
{
path: ‘/’,
name: ‘Home’,
component:() => import(‘../components/Home’),
// 创建Home的子路由。 children
children:[
// {
// path:”,
// // 进入路由后默认的跳转链接 redirect 重定向
// redirect:’p1′
// },
{
path:’p1′,// 不需要加/
component:()=>import(‘../components/Homep1’)
},
// vue动态路由传参,需要三个步骤,
// 1.首先在router-link中这样定义 <router-link :to=”‘/p2/’+msg”> p2</router-link>
// 2.然后需要在路由中设置动态路由,因为传递的参数是不确定的,所以必须要动态路由。 path:’p2/:msg’,
// 3.接着的话就可以到指定的vue文件中用 $route 表示当前正在引用的路由地址。 $route.params.msg 这里的msg命名必须要和动态路由定义的一致
// 第二种传值方式,通过自定义router-link 的属性来传递,
// 1.首先在router-link中绑定v-bind:to=”{path:’/path’,query:{绑定的是一个对象}}” 这里的path不能够省略,query命名不能变化
// 2.接着在.vue文件中直接通过 {{$route.query}} 就可以获取到通过url传递过来的值了。
// 3.这种方法不需要在路由中绑定动态路由来传递 因为不是用的 $route.params 方法来获取的。
{
path:’p2′,// 不需要加/
component:()=>import(‘../components/Homep2’) 路由懒加载写法
}
]
},
{
path: ‘/user/:userid’,
name: ‘User’,
component:() => import(‘../components/User’)
},
]
const router = new VueRouter({
mode: ‘history’, // 如果打包的时候出现router不能正常使用,把这里注释掉或者改成hash就好了
base: process.env.BASE_URL,
routes
})
通过上面的router实例,调用里面的全局路由守卫,beforeEach方法。来为我们的路由转换的同时
更改标题
router.beforeEach((to,from,next)=>{
// 为了保证每次获取到的都是准确的标题,所以需要虚matched中的第一个参数的meta中的标题,
// 也就是在路由中meta中定义的title
document.title=to.matched[0].meta.title
console.log(to); // 输出to查看一下就很清楚了
// 其中next必须要调用,不然路由不会跳转。
next()
})
export default router