暑期实训第四天：项目路由的配置

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，而vue-router能很好的解决这个问题。

配置router

• 首先，输入npm install --save vue-router 安装vue-router
• 安装成功后可以看到在 package.json已经有了

• 
• main.js里写入

import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在router下index.js里 写路由信息

//routes 下写明路由，path是地址栏路径，component是该路径映射的组件
export const routes = [
  {
    path:'/',
    name:'helloWold',
    component: () => import('../components/HelloWorld')
  },
  {
    path: '/login',
    name: 'login',
    component:()  =>import('../components/login/login')
  }
]

//实例化Router对象
export default new Router({
  routes: routes
})

正确完成以上步骤，当我们在地址栏输入路径就能跳转到对应的页面了。

实现页面之间的相互跳转

• 在router下的index.js配置好了路由只能实现在地址栏输入对应的地址跳转，并且实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。以一个简单的跳转实例为例。
• 实现login和HelloWorld的相互跳转

• 
• 在login.vue 里跳转按钮绑定点击事件，点击事件代码

back(){
				//path里是地址路径
        this.$router.push({path:'/'})
    }

在HelloWorld.vue 里如法炮制，点击事件代码

toLogin(){
        this.$router.push({path:'./login'})
    }

如此就实现了通过页面跳转，与a标签href跳转相比，这种方法可以在跳转时传入参数。