iT邦幫忙

0

Vue 的組件中 有關標籤封閉的問題

請教大大!
我在練習用 Vue 實現 404 頁面, 點按 about 會出現 404
頁面中回首頁的按鈕 出現 不能正常解析 到底是哪裡出錯?
如下圖:
https://ithelp.ithome.com.tw/upload/images/20200313/20121754U8gHah9Gpv.png
我的原始碼如下:

  <!DOCTYPE html>
  <html Lang="en">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>前端路由-8~11</title>

  </head>
  <body>

  <div id="app" class="container" style="margin-top: 40px">
    <div id="app" >

      <h3 class="text-center text-warning">{{ topic }}</h3>

      <hr>

      <app></app>

    </div>

  </div>

 <hr>

<!-- 開發環境版本,包含了用幫助的 命令行 之警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  <!-- 這是  前端路由带来的大事件 NO1:前端404页面如何实现  知識點-->
  <script>

    let Home = {
      template :`
        <div>
          <div class="btn btn-large btn-success"> Home </div>
        </div>
      `,
    };

    let About = {
      template :`
        <div class="btn btn-large btn-info"> User About </div>
      `,
    };

    let NotFound = {
      template :`
        <div class="text-center" >
            <h2 class="text-primary> 404 </h2>
            <router-link :to="{ path: '/'}"> 還是回去首頁吧! </router-link>
            <br>
            <router-link :to="{ path: '/'}"> 還是回去首頁吧! </router-link>
        </div>
      `,
    };

    let Navi = {
      template :`
        <ul>
          <li> <router-link v-bind:to="{ path: '/'}">Home</router-link> </li>
          <li> <router-link v-bind:to="{ path: '/about-404'}">About</router-link> </li>
        </ul>
      `,
    };

    let App ={
      template :`
        <div class="wrapper">
          <navi></navi>
          <router-view></router-view>
        </div>
      `,

      components :{
        'navi' : Navi
      }
    };


    let Router = new VueRouter({
      linkExactActiveClass: 'btn btn-info',
      routes :[
        {path: '/', component: Home},
        {path: '/about', component: About},
        {path: '*', component: NotFound},
      ]
    });


    let app = new Vue({

      el : '#app',

      router : Router,

      data : {
          topic : '11-前端404页面如何实现'
      },

      components :{
          app : App
      },

    });

  </script>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
  </html>

麻煩大神解答

看更多先前的討論...收起先前的討論...
class="text-primary <= 少了"
froce iT邦大師 1 級 ‧ 2020-03-13 09:06:46 檢舉
這個IDE應該會整段紅紅的...
謝謝!是我自己眼拙。

我的sublime 似乎沒有 IDE 功能,能否推薦一個
froce iT邦大師 1 級 ‧ 2020-03-13 09:37:50 檢舉
https://packagecontrol.io/packages/Vue%20Syntax%20Highlight

然後我自己是用vscode,sublime趁特價買了沒多久結果vscode出來就一直用vscode了。
sublime對中文輸入法支援不是很好...
dragonH iT邦超人 5 級 ‧ 2020-03-13 09:48:25 檢舉
推 vs code
謝謝提供!我裝好了package list 已經有
vue-syntax-highlight,但是怎麼好像也不提示耶!是要再做甚麼設定嗎?
模板語法應該不會提示
我用 vscode 裝 Bracket Pair Colorizer 也只有括弧顏色跑出來
難道是我沒有裝對套件QQ
froce iT邦大師 1 級 ‧ 2020-03-13 10:28:45 檢舉
vscode要裝Vetur。

sublime...我就說我買了結果根本沒在用嘛。Orz
dragonH iT邦超人 5 級 ‧ 2020-03-13 10:29:14 檢舉
因為你是 .php 阿

他不會知道你在裡面寫 vue

嗯!嗯! 知了,謝謝!
小魚 iT邦大師 1 級 ‧ 2020-03-15 10:30:41 檢舉
難怪看不出來,
原來錯誤出在上面那行.

1 個回答

0
咖咖拉
iT邦研究生 5 級 ‧ 2020-03-13 13:49:42
最佳解答

自刪

我要發表回答

立即登入回答