Vue-router

安装vue router

npm i vue-router

VUE router 使用

创建router文件夹
建立index.js
引入

import Vue from 'vue'
import VueRouter  from 'vue-router'
Vue.use(VueRouter);
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
     { 
		path: '/',
		 name: 'home',
		 component: HelloWorld,
	}]
})
export default router;

main.js使用router

improt router from '../router'
new Vue({
	router,//使用
  render: h => h(App),
}).$mount('#app')

router传值

<div class="examine" @click="insurance(2)">查看详情</div>

第一种方法 页面刷新数据不会丢失

methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

需要对应路由配置如下：

{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }

可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值
另外页面获取参数如下

this.$route.params.id

第二种方法 页面刷新数据会丢失

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

子组件中: 这样来获取参数

this.$route.params.id

第三种方法
使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

对应路由配置：

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

对应子组件: 这样来获取参数

this.$route.query.id

router props传值

首先是通过props设置为true,可以进行布尔传值,可以接受params的方法进行传递

            {
                path:"zdh/:name/:price",//定义其属性
                component:Zdh,
                props:true
            },

其次是通过props为函数时进行传值,此时用的query方式进行参数的传递
URL /search?name=vue 会将 {query: ‘vue’} 作为属性传递

	        {
	                    path:"zdh",
	                    component:Zdh,
	                    props : (route) => ({
	                            name : route.query.name,
	                            age : route.query.age
	                    })  
	         },

最后是可以通过props为对象的方式进行处理静态数据,可使用对象模式

            {
                path:"zdh",
                component:Zdh,
                props:{ 
                     name:'zhaodonghao',
                    age:55
                }
            },

props 获取传值

const foobar={
	props:['epoch','movie','source','German'],
	template :"<div>典型电影：{{movie}}<br /><br />\
						时期:{{epoch}}<br />\
						来源:{{source}}<br />\
						<br /><br /><br />\
						真的{{German}}是德语\
			   </div>"
};

 const router = new VueRouter({
	  	routes:[
	  		{
		  		path:'/foobar',
		  		component:foobar,
		  		props:{movie:'拯救大兵瑞恩',epoch:"二战时期",source:"盟军俚语",German:false}
	  		},
	  	]
  })

导航守卫

router.beforeEach((to, from, next) => {
	if(to.path == '/About/Aboutlist'){
		if(to.query.name=='zh123'){   //判断传值来重定向路由
			next() 
		}
	}else{
		next() 
	}
})

next('/')       // ‘/’路由的路径