vue-router基础 路由配置 路由传值 路由跳转

一、路由配置(如何使用vue-router)

1.安装

      npm install vue-router --save //cnpm install vue-router

2.引入并且 使用(main.js)

   import VueRouter from 'vue-router'
   Vue.use(VueRouter)

3.配置路由(main.js)

3.1 创建组件 引入组件

import User from './components/User.vue'

3.2 定义路由(建议复制)

const routes = [
     {path:'/user',component:User},
     {path:'*',redirect:'/user'}  //默认跳转路由，匹配不到就跳转/user       
 ]

3.3 实例化 VueRouter(main.js)

      const router = new VueRouter({
           //mode: 'history',//配置后URL上的#会消失
           routes// (缩写) 相当于routers:routes
       })

3.4 挂载(main.js)

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

3.5 根组件的模板里边使用(组件中)

3.6 路由跳转

    Go to User

二、路由跳转三种方式

1. Go to User （点击实际也调用的是push）

2. push 注意：如果提供了 path，params 会被忽略。但是query 可以和path配合使用，这种情况下 query传递的参数会显示在url后面例如：http://localhost:8081/#/newsDetail?id=？

   // 字符串   home 是路径
    router.push('home')
   
    // 对象   home 是路径
    router.push({ path: 'home' })
   
    // 命名的路由    User是路由的重命名
    router.push({ name: 'User', params: { userId: '123' }})
   
    // 带查询参数，变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})
   

3.History 用url的hash来模拟一个完整的URL
笔者也未理解(- - ！)
有兴趣深入了解History的同学请查看官网https://router.vuejs.org/zh/guide/essentials/history-mode.html

三、路由重定向

重定向是通过 routes 配置来完成,记得关键字redirect即可。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
    { path: '*', redirect: '/c' }
  ]
})

• { path: '/a', redirect: '/b' } 代表路由跳转路径为a时候就重定向到b
• { path: '*', redirect: '/c' }中的*代表未匹配到目标路由时就重定向到c

四 编程式导航

前进与后退
this.$router.go(-1) 和 this.$router.go(1)

五、路由传值

1.父组件push使用this.$router.push
2.在子组件中获取参数的时候是this.$route.params

1 、动态路由传值

   1.1 配置动态路由
      routes:[
         //动态路由参数  以冒号开头
         {path:'/user/:id',conponent:User}
       ]

   1.2 传值
     第一种写法 :  传值
     第二种写法 : goToUser(id) {
                    this.$router.push( {path:'/user/'+id});
                  }
   1.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

2、 Get传值(类似HTMLGet传值）

 2.1 配置路由
     const routes = [{path:'/user',component:User},]
 2.2 传值  
     第一种写法 : 传值
     第二种写法 : goToUser(id) {
                        //'user' 是路径名称
                      this.$router.push({path:'user',query:{ID:id}});
                  }
 2.3 在对应页面取值
     this.$route.query;  //结果 {id:123}

Tips：路径传递参数会拼接在URL路径后

3 、命名路由push传值

3.1 配置路由
   const routes = [{path:'/user',name: 'User',component:User},]
3.2 传值  
        goToUser(id) {
                //'User' 是路径重命名
              this.$router.push({name:'User',params:{ID:id}});
           }
3.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

Tips：命名路由传递参数不在URL路径拼接显示

如果您有什么疑问或者发现书写歧义，非常感激您能留言~