【vue 路由模式】

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

刷新的时候数据不会丢失