vue2 路由（笔记）

冷不防 2022-06-01 14:25 210阅读 0赞

更多详细内容看官网[https://router.vuejs.org/zh-cn/essentials/getting-started.html][https_router.vuejs.org_zh-cn_essentials_getting-started.html]

注意事项

1.  template 标签中必须有一个根元素
2.  首先引用是vue.js 之后引用 vue-router.js
    
    代码实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>路由</title> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-router/dist/vue-router.js"></script> </head> <body> <div id="box"> hello world <div> <router-link to="/home">home</router-link> <router-link to="/news">news</router-link> </div> <div> <router-view></router-view> </div> </div> <template id="home"> <div> { { msga}} </div> </template> <template id="news"> <div> { { msgb}} </div> </template> <script> // 1.定义组件 const Home = { template:'#home', data(){ return { msga:'this is home !' } } } const News = { template:'#news', data(){ return { msgb:'this is news page!' } } } // 2.定义路由 const routes = [ {path:'/home',component:Home}, {path:'/news',component:News}, {path:'*',redirect:'/home'} //重定向 ] // 3.创建路由实例 const router = new VueRouter({routes})// （缩写）相当于 routes: routes // 4.挂载实例 var vm = new Vue({ router }).$mount("#box") </script> </body> </html>

子路由

<router-link to="/news/homeland">   //链接命名
    
    // 2.定义路由
        const routes = [
          {path:'/home',component:Home},
          {
            path:'/news',
            component:News,
            children:[//子路由
              {
                path:'homeland',
                component:Homeland
              }
            ]
          },
          {path:'*',redirect:'/home'}
        ]

路由参数匹配

<router-link to="/news/homeland/001/age/20">新闻001</router-link>
    <router-view></router-view>  //这个一定不能忘，不然看不到内容
    
    const Details = {
          template:'<h2>获取到的参数{ {$route.params}}</h2>',
          mounted(e,el){
            console.log(e,el)//没有值，为undefined
            console.log(this.$route) //$route上面挂载的参数
          }
        }
        // 2.定义路由
        const routes = [
          {path:'/home',component:Home},
          {
            path:'/news',
            component:News,
            children:[//子路由
              {
                path:'homeland',
                component:Homeland,
                children:[
                  {
                    path:':id/age/:age',component:Details
                  }
                ] } ] }, {path:'*',redirect:'/home'} ]

打印出来的$route上挂载的参数  
![这里写图片描述][SouthEast]

监视路由变化

const News = {
          template:'#news',
          data(){
            return {
              msgb:'this is news page!'
            }
          },
          watch:{
            '$route'(to,from){
              console.log(to , from)
            }
          }
        }

打印出来的结果如下  
![这里写图片描述][SouthEast 1]

或者这样监视，vue2.2 中引入了 beforeRouteUpdate函数

beforeRouteUpdate(to,from,next){
            console.log(to)
            console.log(from)
           // console.log(next)
            next() //这个必须有，不然不能实现跳转
          }

函数方法 添加路由，表现形式是切换路由，其实是向历史记录中添加一条记录，下面的路由方法使用于`<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>`  
router.push(location, onComplete?, onAbort?)  
注意：在 Vue 实例内部，你可以通过 router访问路由实例。因此你可以调用this.  r o u t e r 访 问 路 由 实 例 。 因 此 你 可 以 调 用 t h i s . router.push。

methods:{
            push(){
       //添加路由
              router.push({path:'/home'})
            }
          }
    
    //更多参数形式
    // 字符串
    router.push('/news')
    
    // 对象
    router.push({ path: '/news' })
    
    // 命名的路由-- 需要在设置路由的时候给指定的路由设计name值才能使用这个功能
     // 2.定义路由
        const routes = [
          {path:'/home',component:Home},
          {
            path:'/news',
            name:'news',  //跳转的时候找的是这个名字
            component:News,  。。。。}
    router.push({ name: 'user', params: { userId: 123 }})
    
    // 带查询参数，变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})

替换路由，表现形式和上面一样，但是历史记录中没有记录  
router.replace(location, onComplete?, onAbort?)  
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

methods:{
            push(){//添加路由
              router.push({path:'/home'})
            },
            replace(){//替换路由
              router.replace({path:'/news'})
            }
          }

路由切换时如果想添加动态效果直接用`<transition>`将`<router-view>`包住即可

[https_router.vuejs.org_zh-cn_essentials_getting-started.html]: https://router.vuejs.org/zh-cn/essentials/getting-started.html
[SouthEast]: /images/20220601/777525a2615046b79bdaa3336d819013.png
[SouthEast 1]: /images/20220601/e6fd26a10a6240f3b600fbc839510a44.png