二 Vue-Router

時間 2021-08-13

標籤 css html vue vue-router npm 編程 bootstrap app ide post 欄目 CSS 简体版

原文原文鏈接

二 V u e − R o u t e r 二 Vue-Router 二Vue−Router

一使用CDN

1.使用最新版本css

代碼地址：Gitee、Github
存儲地址：
百度雲-提取碼：
Google雲html

基本使用

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src="./js/vue-router.js"></script>
   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <title></title>
</head>
<body>
  <div id="app">

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Major</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <router-link to="/">
                首頁
              </router-link>
            </li>
            <li>
              <router-link to="/find">
                發現音樂
              </router-link>
             </li>
            <li>
              <router-link to="/friend">
                個人朋友
              </router-link>
           </li>
          </ul>
          

        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
 
               <router-view></router-view>
    </div>

  </div>

  
  <script>
    var index = Vue.extend({template:"<h1>首頁</h1>"})
    var find = Vue.extend({template:"<h1>發現音樂</h1>"})
    var friend = Vue.extend({template:"<h1>個人朋友</h1>"})

    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/find",component:find},
        {path:"/friend",component:friend},
      ]
    })


index
    new Vue({
      el:'#app',
      router,
    })
  </script>
</body>
</html>

動態路由

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>  
  <title></title>
</head>
<body>
  <div id='app'>
    <ul>
      <li>
        <router-link to="/">首頁</router-link>
      </li>
      <li>
        <router-link to="/profile/123">我的中心</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  <script>

    let index = Vue.extend({template:"<h1>首頁</h1>"})
    let profile = Vue.extend({template:"<h1>我的中心:{{$route.params.userid}}</h1>",
    mounted(){
      console.log(this.$route);
      console.log(this.$router);
    }
    
    })
    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/profile/:userid",component:profile},
      ]
    })

    new Vue({
      el:'#app',
      router,

    })
  </script>
</body>
</html>

組件複用

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>  
  <title></title>
</head>
<body>
  <div id='app'>
    <ul>
      <li>
        <router-link to="/profile/major_1">major_1我的中心</router-link>
      </li>
      <li>
        <router-link to="/profile/major_2">major_2我的中心</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  <script>

    let index = Vue.extend({template:"<h1>首頁</h1>"})
    let profile = Vue.extend({template:"<h1>我的中心:{{$route.params.userid}}</h1>",
    mounted(){
      console.log(this.$route.params.userid);
      // console.log(this.$route);
      // console.log(this.$router);
    },

    watch:{   
      "$route":function(to,from){
         console.log("to",to);
         console.log("from",from);
      }
    },

/*     beforeRouteUpdate:function(to,from,next){
       console.log("to",to);
       console.log("from",from);
       next()
    } */
  
    })
    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/profile/:userid",component:profile},
      ]
    })

    new Vue({
      el:'#app',
      router,

    })
  </script>
</body>
</html>

404錯誤配置

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-view></router-view>
  </div>
  <script>
    let index= Vue.extend({
      template:"<h1>首頁</h1>"
    })
    let aboutus= Vue.extend({
      template:"<p>關於咱們</p>"
    })
    let profile= Vue.extend({
      template:"<h1>我的中心：{{$route.params.userid}}</h1>",
      mounted(){
        if(this.$route.params.userid != '123'){
           this.$router.replace("/404")
        }
      },
      watch:{
        "route":function(to,from){
             // 解決複用問題
        }
      }
    })
    let notfound= Vue.extend({
      template:"<h1>404頁面沒有找到</h1>"


    })

    let router = new  VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/aboutus",component:aboutus},
        {path:"/profile/:userid",component:profile},
        {path:"/404",component:notfound},

      ]
    }

    )



    new Vue({
      el:'#app',
      router:router
    })
  </script>
</body>
</html>

路由嵌套（子路由）

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <title></title>
</head>
<body>
  <div id='app'>
    <nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Major_Page</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <router-link to="/">首頁</router-link>
            </li>
            <li><router-link to="/user/123">個人主頁</router-link></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
   <div class="container">
     <router-view></router-view>
   </div>

  </div>
  <script>
    let index = Vue.extend({
      template:"<h1>首頁</h1>"
    })
    let user = Vue.extend({
      template:`
      <div>
      <h1>個人主頁</h1>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active">
        <router-link to="/user/123/setting">設置</router-link>
        </li>
        <li role="presentation">
        <router-link to="/user/123/message">消息</router-link>
        </li>
    
      </ul>
      <div class="container">
     <router-view></router-view>
   </div>
</div>
      
      `
    })

    let user_setting = Vue.extend({
      template:"<h3>我的中心</h3>"
    })
    let user_message = Vue.extend({
      template:"<h3>消息</h3></h3>"
    })
    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {
          path:"/user/:userid",
          component:user,
          children:[
          {path:"",component:user_setting},
          {path:"setting",component:user_setting},
          {path:"message",component:user_message},
          ]

          
          
          }
      ]
    })

    new Vue({
      el:'#app',
      router,

    })
  </script>
</body>
</html>

編程式導航

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <title></title>
</head>
<body>
  <div id='app'>

    <button @click="gotoPost">帖子列表</button>
    <button @click="gotoProfile">我的中心</button>
    <button @click="gotoLogin">登陸</button>
    <button @click="gotoNext">next</button>
    <button @click="gotoPrev">prev</button>
    <router-view></router-view>
  </div>
  <script>
    let post = Vue.extend({
      template:"<h1>帖子列表</h1>"
    })
    let profile = Vue.extend({
      template:"<h1>我的中心:{{$route.params.userid}}</h1>"
    })
    let login = Vue.extend({
      template:"<h1>登陸界面:{{$route.query}}</h1>"
    })

    let router =new VueRouter({
      routes:[
        {path:"/post",component:post},
        {path:"/profile/:userid",component:profile,name:"myprofile"},
        {path:"/login",component:login},
      ]
    })
    new Vue({
      el:'#app',
      router,
      methods:{
        gotoPost(){
          this.$router.push("/post")
        },
        gotoProfile(){
          //this.$router.push("/profile/123")
          //this.$router.push({path:"/profile/123"})
          this.$router.push({name:"myprofile",params:{userid:"aaa"}})
        },
        gotoLogin(){
          let currentPath = this.$route.fullPath
          this.$router.push({path:"/login",query:{from:currentPath}})
        },
        gotoNext(){
          this.$router.go(1)

        },
        gotoPrev(){
          this.$router.go(-1)
        }
      }
    })
  </script>
</body>
</html>

命名視圖

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <style>
    .header{
      width:100%;
      height:200px;
      background: pink;
    }
    .body{
      display: flex;
      height: 800px;
    }
    .body .sidebar{
      width: 200px;
      background: salmon;
    }
    .body .main{
      flex:1;
      background: blanchedalmond;
    }
    .footer{
      background: gray;
      height: 200px;
    }
  </style>
  <title></title>
</head>
<body>
  <div id='app'>
  <div class="header">
      <router-view name="header"></router-view>
  </div>
  <div class="body">
    <div class="sidebar">
      <router-view name="sidebar"></router-view>
    </div>
    <div class="main">
      <router-view name="main"></router-view>
    </div>
  </div>
  <div class="footer">
    <router-view name="footer"></router-view>
  </div>
  </div>
  <script>
    let headerComponent = Vue.extend({
      template:"<div>header部分</div>"
    })
    let sidebarComponent = Vue.extend({
      template:"<div>sidebar部分</div>"
    })
    let mainComponent = Vue.extend({
      template:"<div>main部分</div>"
    })
    let footerComponent = Vue.extend({
      template:"<div>footer部分</div>"
    })
    let router = new VueRouter({
      routes:[
        {
          path:"/",
          components:{
            header:headerComponent,
            sidebar:sidebarComponent,
            main:mainComponent,
            footer:footerComponent,
          }
        }
      ]
    })

    new Vue({
      el:'#app',
      router,
    })
  </script>
</body>
</html>

重定向和別名

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-view></router-view>
  </div>
  <script>
    let index = {template:"<h1>首頁</h1>"}
    let article = {template:"<h1>文章列表</h1>"}

    let router = new VueRouter({
      routes:[
        {path:"/",redirect:"/article"},
        {path:"/article",component:article,alias:"/list"}
      ]
    })
    new Vue({
      el:'#app',
      router,
    })
  </script>
</body>
</html>

全局導航守衛

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-link to="/">首頁</router-link>
    <router-link to="/account">個人帳戶</router-link>
    <router-link to="/order">個人訂單</router-link>
    <router-link to="/login">登陸</router-link>
    <router-view></router-view>
  </div>
  <script>
     const logined = false
    let index = {template:"<h1>首頁</h1>"}
    let account = {template:"<h1>個人帳戶</h1>"}
    let order = {template:"<h1>個人訂單</h1>"}
    let login = {template:"<h1>登陸</h1>"}
    var router = new VueRouter({
      routes:[
        {path:"/",component:index,name:"index"},
        {path:"/account",component:account,name:"account"},
        {path:"/order",component:order,name:"order"},
        {path:"/login",component:login,name:"login"},
      ]
    })
    router.beforeEach(function(to,from,next){
      const authRoutes = ['account','order']
      if(authRoutes.indexOf(to.name)>=0){
                if(!logined){
                  next("/login")
                } else{
                  next()
                }
      }else if(to.name =="login"){

        if(logined){
          next('/')
        }else{
          next()
         }
        }else{
          next()
      }
    })
    router.afterEach(function(to,from){
            console.log("to:",to)
            console.log("from",from)
    })
    new Vue({
      el:'#app',
      router,
      data:{
       
      },
    })
  </script>
</body>
</html>

路由導航守衛

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-link to="/">首頁</router-link>
    <router-link to="/account">個人帳戶</router-link>
    <router-link to="/order">個人訂單</router-link>
    <router-link to="/login">登陸</router-link>
    <router-view></router-view>
  </div>
  <script>
     const logined = false
    let index = {template:"<h1>首頁</h1>"}
    let account = {template:"<h1>個人帳戶</h1>"}
    let order = {template:"<h1>個人訂單</h1>"}
    let login = {template:"<h1>登陸</h1>"}
    var router = new VueRouter({
      routes:[
        {path:"/",component:index,name:"index"},
        {path:"/account",component:account,name:"account"},
        {path:"/order",component:order,name:"order"},
        {path:"/login",component:login,name:"login",beforeEnter:function(to,from,next){
          if(logined){
            next("/")
          }else{
            next()
          }

        }},
      ]
    })
 
    new Vue({
      el:'#app',
      router,
      data:{
       
      },
    })
  </script>
</body>
</html>

組件導航守衛

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src='./js/vue.js'></script>
  <script src='./js/vue-router.js'></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-link to="/">首頁</router-link>
    <router-link to="/account">個人帳戶</router-link>
  </div>
  <script>
    let index = {template:"<h1>首頁</h1>"}
    let account = {template:"<h1>個人帳戶</h1>",
    beforeRouteEnter:function(to,from,next){
      console.log("to",to);
      console.log("from",from);
      console.log(this.username);
      next( vm =>{
        console.log('username:',vm.username);
      }
      )
    },
    beforeRouteUpdate:function(to,from,next){
      console.log("to",to);
      console.log("from",from);
      next()
    },
    beforeRouteLeave(to,from,next){
      let answer = window.confirm("您肯定要離開這個頁面嗎？")
      if(answer){
             next()
      }

    }
    }

 var router = new VueRouter({
      routes:[
        {path:"/",component:index,name:"index"},
        {path:"/account",component:account,name:"account"},]}
 )

    new Vue({

      el:'#app',
      router,
      data:{
       
      },
    })
  </script>
</body>
</html>