vue路由基础回顾

image.png

• 1 $route.params.id不是router
• 2 子路由要写router-view 路径不要写/
• 3 路由的时候要加s routes==!router(x错误)
• 4 在写路由components的一定要写复数 加s
• 5 url 传递参数时to="/params/111/222"
• 读取参数时 {{$route.params.aaa}}
• {{JSON.stringify($route,null,2)}}
  
• 6 在正则路由的情况下市绑定不到值的‘/par/:id(\d+)’==params为空
• 7 a链接上色==》 a.router-link-active 【append exact 作用】
• 8 append =url后面无限叠加 exact==绝对路径
• 9 query path:'/users/woss' 一对
• 10 name params 是一对的

index.html

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

main.js 同样通过重定向来显示父路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//创建路由实例
const router = new VueRouter({routes})
 
new Vue({
    el: '#app',
    data: {
        id:123,
    },
    methods: {
 
    },
    router
})

home.vue 通过query来传递num参数为1，相当与在 url 地址后面拼接参数

<template>
    <div>
        <h3>首页</h3>
        <router-link :to="{ path:'/home/game', query: { num:  1} }">
            <button>显示<tton>
        </router-link>
 
        <router-view></router-view>
    </div>
</template>

game.vue 子路由中通过 this.$route.query.num 来显示传递过来的参数

    <template>
        <h3>王者荣耀{{ this.$route.query.num }}</h3>
    </template>

/****
 * 1 $route.params.id不是router
 * 2 子路由要写router-view  路径不要写/
 * 3 路由的时候要加s routes==!router(x错误)
 * 4 在写路由components的一定要写复数 加s
 * 5 url 传递参数时to="/params/111/222" 
 *   读取参数时  {{$route.params.aaa}}
 *   {{JSON.stringify($route,null,2)}} <br>
 * 6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
 * 7 a链接上色==》 a.router-link-active 【append  exact 作用】
 * 8 append =url后面无限叠加  exact==绝对路径
 * 9 query path:'/users/woss' 一对
 * 10 name params 是一对的
 * 
 */

let zyi=`
1 $route.params.id不是router {{$route.name}} <br>
2 :to==>子路由要写router-view  children:[]路径不要写/ <br>
3 路由的时候要加s routes==!router(x错误)<br>
4 在写路由components的一定要写复数 加s <br>
5 url 传递参数时to="/params/111/222" 
  读取参数时  {{$route.params.aaa}}
  '{{JSON.stringify($route,null,2)}} '<br>
6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空 <br>
7 a链接上色==》 a.router-link-active <br>
8 append =url后面无限叠加  exact==绝对路径 <br>
9 query path:'/users/woss' 一对 <br>
10 name params 是一对的 <br>
11 监听路由 watch $route from.path==‘/a’ <br>
12 data(){} 绑定里面的值 都必须要 :name 动画名来绑定 <br>
13 vue里面看错误从下面往上看
14 监听路由beforeEnter(to,from,next) 里面一定要写next()
`


const home={template:`<div>
        <h2>heome</h2>
        <p>this is home</p>
     </div>`}

const parent={template:`<div> 
     <h2>parent</h2>
     <p>this is parent</p>
  </div>`}
  
  const parent404={template:`<div> 
     <h2>parent</h2>
     <p>错误 parent404</p>
  </div>`,
  beforeRouteEnter: (to, from, next) => {
    console.log(to)
    console.log(from)
    // console.log(next)
    // next(false)
    next()
  },
  beforeRouteLeave: (to, from, next) => {
    console.log(to)
    console.log(from)
    // console.log(next)
    // next(false)
    next()
  }

}

const router=new VueRouter({
  mode:'history',
    base:'__dirname',//当前的本地路径   
    routes:[
       {path:'/',name:'home',component:home},
       {path:'/parent',name:'parent', component:parent,
        // beforeEnter: (to, from, next) => {
        //   console.log(to)
        //   console.log(from)
        //   // console.log(next)
        //   next(false)
        //   // next({path:'/alkju'})
        // }
      
      },
       {path:'*', component:parent404}
    ]


})




new Vue({ //router-pam
    router,
    data(){
      return{
        a:'fade'
      }
    },
    template: `<div id="ap">
               <h6>${zyi}</h6>
                <h1>parent</h1>
                <ul>
                  <li><router-link to='/'>/home</router-link> </li>
                  <li><router-link to='/parent'>/parent</router-link> </li>
                  <li><router-link to='/parent987'>/parent错误页面</router-link> </li>
                </ul>
                <transition :name="a" mode="out-in">
                  <router-view></router-view>
                </transition>
              </div>`
              ,watch:{
                '$route'(to,from){
                    if(from.path=='/parent'){
                        this.a="fade"
                    }else{
                      this.a="fade2"
                    }
                }
              }
  }).$mount('#app')