vue中vue-router怎么使用(router,vue,开发技术)

安装vue-router

命令行执行：

npmivue-router-S

创建配置文件

在项目src文件夹下创建config文件夹存放路由配置

在config文件夹下新建router.js和routes.js

• router.js: 存放路由设置

• routes.js: 存放理由映射规则

路由映射规则配置

importLoginfrom'../views/login/login.vue'//import组件名from'组件路径'importRegisterfrom'../views/register/register.vue'importChildrenVuefrom'../views/children/children.vue'exportdefault[{path:'/',redirect:'/login'},{path:'/login',component:Login,name:'login',meta:{//保存页面信息title:'thisisLogin',description:'thisisLogindescription'},children:[//子路由{path:'/children',component:ChildrenVue}]},{path:'/register',component:Register,name:'register'}]

路由设置内容

基本配置：

importRouterfrom'vue-router'importroutesfrom'./routes'//导入router映射规则constrouter=newRouter({routes})exportdefaultrouter

若使用服务端渲染改写为：

importRouterfrom'vue-router'importroutesfrom'./routes'//导入router映射规则//每次import都创建一个新的router避免内存溢出exportdefault()=>{returnnewRouter({routes,mode:'history'//改为history模式方便服务端渲染做SEO})}

入口文件配置

importVuefrom'vue'importVueRouterfrom'vue-router'importcreateRouterfrom'./config/router'//导入router配置文件Vue.use(VueRouter)constrouter=createRouter()newVue({router,render:(h)=>h(App)}).$mount('#root')

app.vue配置

在app.vue中加入：

<router-view></router-view>

给router-view添加切换动画：

<transitionname="fade"><router-view></router-view></transition>

css:

.fade-enter-active,.fade-leave-active{transition:opacity.5s;}.fade-enter,.fade-leave-to{opacity:0;}

router中使用props

路由之前传参可以使用this.$route拿到参数也可以使用props：

{path:'/login',props:(route)=>({id:route.query.id}),component:Login,},

在login页面的export default添加props:

exportdefault{props:['id'],mounted(){console.log(this.id)//打印传递的参数},}

浏览器访问得到结果：

浏览器访问得到结果：

其他配置属性

base:

exportdefault()=>{returnnewRouter({routes,mode:'history',base:'/base/'})}

设置base之后浏览器访问页面路由path前面会自动加上base配置的值

scrollBehavior :

//scrollBehavior记录页面滚动的位置下次进来直接滚动到记录的位置exportdefault()=>{returnnewRouter({routes,mode:'history',scrollBehavior(to,from,savedPosition){//savedPosition记录的位置如果没有返回最初位置if(savedPosition){returnsavedPosition}else{return{x:0,y:0}}}})}

导航守卫

入口文件中配置全局导航守卫：

importVuefrom'vue'importVueRouterfrom'vue-router'importcreateRouterfrom'./config/router'//导入router配置文件Vue.use(VueRouter)constrouter=createRouter()//导航守卫-startrouter.beforeEach((to,from,next)=>{console.log('beforeeachinvoked')next()})router.beforeResolve((to,from,next)=>{console.log('beforeresolveinvoked')next()})router.afterEach((to,from)=>{console.log('aftereachinvoked')})//导航守卫-endnewVue({router,render:(h)=>h(App)}).$mount('#root')

组件内部导航守卫配置：

constfooter={template:`<div>footer</div>`,beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用//不！能！获取组件实例`this`//因为当守卫执行前，组件实例还没被创建},beforeRouteUpdate(to,from,next){//在当前路由改变，但是该组件被复用时调用//举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，//由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。//可以访问组件实例`this`},beforeRouteLeave(to,from,next){//导航离开该组件的对应路由时调用//可以访问组件实例`this`}}

每个路由独享的导航守卫配置：

{path:'/login',component:Login,beforeEnter:(to,from,next)=>{//...},beforeResolve:(to,from,next)=>{//...},afterEach:(to,from,next)=>{//...}},