Vue中路由的配置

vue中路由的使用

 

1.安装：npm install vue-router --save(写入package.json)

2.引入:在router文件夹下的index.js中import Router from 'vue-router'//12在以cli2创建的项目中已经完成

3.引入组件：在router文件夹下的index.js

  import HelloWorld from '@/components/HelloWorld'  
  import Home from '@/components/Home'

4.配置路由：在router文件夹下的index.js
 

   const routes = [
     {
        path: '/home/:aid',//动态路由的配置
        name: '123',//命名路由的配置
        component: Home
      },
     {
        path: '/helloword',
        component: Helloworld
      },
     {
        path: '*',
        redirect: '/home'
      }/*默认跳转路由*/   
    ]

5.实例化vue-router：在router文件夹下的index.js
 

   const router = new Router({
     mode:"history",//把hash模式改为history模式
     routes // （缩写）相当于 routes: routes
   })

6.暴露模块：在router文件夹下的index.js

  export default router

6.挂载：在main.js文件中
  

 new Vue({
   el: '#app',  
   router，  
   render: h => h(App)  
 })

使用

  <router-link to='/home'>去home</router-link>
  this.$router.push({path:'helloworld'})
  this.$router.push('/helloworld')
  this.$router.push({ name: '123' });//命名路由
  <router-link to='/home/123'>去home</router-link>//动态路由
  <router-link :to="'/home/'+key">去home</router-link>//动态路由
    geturl(){
        console.log(this.$route.params);//aid:123
    }
  <router-link to='/home?aid=123'>去home</router-link>//get传值
    geturl(){
        console.log(this.$route.query);//aid:"123"
    }
  <router-link :to="'/home?aid='+key">去home</router-link>