vue 路由
路径 和 组件的一一对应关系
比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由
路由模式
2种 hash history;默认是hash模式
区别:hash模式会带 #号 ,不美观
history 不带#号
修改路由模式
//在router文件夹下的index.js
const router = new VueRouter({
mode:'history', // 修改路由模式
routes
})
路由(导航)的跳转
声明式的导航 router-link to="要跳转的页面路径"
编程式的导航 this.$router.push()
vue的路由传参数
1. query:既可以使用name也可以使用path,刷新页面参数不会丢失
this.$router.push({
name:'',
path: '',
query: {}
})
this.$router.push('/info?canshu1=1&canshu2=2')
如何接受query参数:
this.$route.query.属性名
2. params传参数 只能使用name跳转,刷新的时候参数会丢失,不会显示到页面的url上
this.$router.push({
name:'',
params: {}
})
如何接受params参数:
this.$route.params.属性名
3. 动态路由传参数
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
//需要对应路由配置如下:
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
//获取参数方法
this.$route.params.id
刷新的时候数据不会丢失