5.router实例钩子

最新推荐文章于 2023-10-24 15:26:33 发布

yhy822

最新推荐文章于 2023-10-24 15:26:33 发布

阅读量246

点赞数

分类专栏： vue 文章标签：实例

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
      <router-view></router-view>
      <a href="#/">home</a>
      <a href="#/test">test</a>
  </div>
  <template id="home">
      <div>
          <textarea v-model="text" name="" id="" cols="30" rows="10"></textarea>
      </div>
  </template>
  <script src="./vue.min.js"></script>
  <script src="./vue-router.js"></script>
  <script>
      var home={
          data(){
              return{
                  text:''
              }
          },
          template:'#home',
          beforeRouteLeave(to,from,next){
             if(this.text){
                 if( confirm('是否保存')) {
                     //console.log('保存成功')
                     //add product  update
                     next();
                 }else{
                     next();
                 }
              }else{
                 next()
             }
          }
      }
      var router=new VueRouter({
          routes:[
              {
                  path:'/',
                  component:home
              },{
                  path:'/test',
                  component:{template:'<div>test</div>'}
              }
          ]
      })
      new Vue({
          el:'#app',
          router
      })

  </script>
</body>
</html>

yhy822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.router实例钩子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <router-view></router-view> <a href="#/">home</a> <a href="
复制链接

扫一扫