1、匹配404錯誤：

在路由規則中，* 代表的是任意字符。所以只要在路由的最後添加一個路由，那麼以後沒有匹配到的url都會被導入到這個視圖中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/">首頁</router-link>
        <router-link to="/profile">個人主頁</router-link>
        <!-- 路由匹配到的組件將渲染到這裏  vue-router的出口 -->
        <router-view></router-view>
    </div>
    
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有組件名字    extend是沒有組件的名字的
    var index = Vue.extend({template: "<h1>這是首頁</h1>"})    //{}裏面是個對象，
    var profile = Vue.extend(
        {template: "<h1>這是個人主頁{{$route.params.userid}}</h1>",    //輸出動態綁定的路由id
        
        mounted(){
            console.log(this.$route)     //輸出路由中的參數數據
            console.log(this.$router)    //加強版本輸出數據項目

            console.log(this.$route.params.userid)
            if(this.$route.params.userid != '123'){   //判斷id是否等於
                this.$router.replace('/404')
            }
        }
    
    }) 

    //vue-router
    var router = new VueRouter({
        routes:[              //這裏的routes需要注意，不同於其他
            {path:"/", component:index},
            {path:"/profile/:userid", component:profile},   //  動態綁定id  /:userid
            {path:"*", component:notfound},    // * 通配符  notfound匹配找不到的頁面
            {path:"/404", component:notfound},    //notfound匹配找不到的頁面
        ],
        
    })

    new Vue({
        el:"#app",
        data:{
        },
        router:router    //router 是關鍵字
    })
</script>

2、嵌套路由：

有時候在路由中，主要的部分是相同的，但是下面可能是不同的。比如訪問用戶的個人中心是/user/profile/，查看用戶發的貼子是/user/posts/等。這時候就需要使用到嵌套路由。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"></link> 
</head>
<body>
    <div id="app">
        <router-link to="/">首頁</router-link>
        <router-link to="/profile">個人主頁</router-link>
        <!-- 路由匹配到的組件將渲染到這裏  vue-router的出口 -->
        <router-view></router-view>
    </div>
    
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有組件名字    extend是沒有組件的名字的
    var index = Vue.extend({template: "<h1>這是首頁</h1>"})    //{}裏面是個對象，
    var profile = Vue.extend(
        {template: `
        <div>                      
            <h1>這是個人主頁{{$route.params.userid}}</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>
        `})    
    
    var setting = Vue.extend({template:"<h1>設置</h1>"}) 
    var mesage = Vue.extend({template:"<h1>消息</h1>"}) 

    //vue-router
    var router = new VueRouter({
        routes:[              //這裏的routes需要注意，不同於其他
            {path:"/", component:index},
            {
                path:"/:userid", 
                component:profile,
                children:[                           //嵌套路由的核心部分
                    //訪問默認界面
                    {path:"", component:setting},
                    //訪問界面其他選項
                    {path:"setting", component:setting},
                    {path:"message", component:mesage},
                ]        
            },   

            //{path:"/profile/:userid/setting", component:setting},
        ],
        
    })

    new Vue({
        el:"#app",
        data:{
        },
        router:router    //router 是關鍵字
    })
</script>

顯示界面如下：

3、編程式導航

之前我們學習了使用 <router - link> 可以在用戶點擊的情況下進行頁面更新。但有時候我們想要在js中手動的修改頁面的跳轉，這時候就需要使用編程式導航了。

$router.push跳轉：
想要導航到不同的URL，則使用router.push方法。這個方法會向history棧添加一個新的記錄，所以，當用戶點擊瀏覽器後退按鈕時，則回到之前的URL。

當你點擊時，這個方法會在內部調用，所以說，點擊<router -link :to="…">等同於調用router.push(…)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="gotoPost">列表</button>
        <button @click="gotofile">文件</button>
        <button @click="login">登錄</button>
        <router-view></router-view>
    </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有組件名字    extend是沒有組件的名字的
    var post = Vue.extend({template: "<h1>首頁</h1>"})    //{}裏面是個對象，
    
    var profile = Vue.extend({template:"<h1>個人中心</h1>"}) 

    var login = Vue.extend({template:"<h1>登錄界面</h1>"}) 

    //vue-router
    var router = new VueRouter({
        routes:[              //這裏的routes需要注意，不同於其他
            {path:"/post", component:post},
            {path:"/profile", component:profile, name:"myprofile"},
            {path:"/login", component:login, name:"login"},
        ],
    })
    new Vue({
        el:"#app",
        router:router,
        methods:{
            gotoPost:function(){
                this.$router.push("/post")
            },
            gotofile:function(){
                //this.$router.push("/profile")                  //下面的是另一種形式轉到url尾部爲new_userid
                this.$router.push({name:"myprofile",params:{userid:"new_userid"}})
            },
            login(){
                //wd?python      網頁url顯示爲:/login?wd=python
                this.$router.push({path:"login", query:{wd:"python"}})
            },

        }
    })
</script>

聲明式	編程式
<router -link :to="…">	router.push(…)

// 字符串
router.push(‘home’)

// 對象
router.push({ path: ‘home’ })

// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})

// 帶查詢參數，變成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

注意：如果提供了path，params會被忽略，上述例子中的query並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的name或手寫完整的帶有參數的path：

const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
// 這裏的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user

router.replace(location, onComplete?, onAbort?)：
跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

這個方法的參數是一個整數，意思是在history記錄中向前或者後退多少步，類似window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默認失敗
router.go(-100)
router.go(100)

4、命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建Router實例的時候，在routes配置中給某個路由設置名稱。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要鏈接到一個命名路由，可以給router-link的to屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

這跟代碼調用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

實例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- :to  冒號很重要 -->
        <router-link v-bind:to="{name:'index'}">HOME</router-link>
        <router-view></router-view>
    </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>

    var home = Vue.extend({template:"<h1>首頁</h1>"})
    var router = new VueRouter({
        routes:[
            {path:"/", name:"index", component:home}
        ]
    })
    new Vue({
        el:"#app",
        router:router,

    })
</script>

5、命名視圖

有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個佈局，有sidebar(側導航) 和main(主內容) 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是隻有一個單獨的出口。如果router-view沒有設置名字，那麼默認爲default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一個視圖使用一個組件渲染，因此對於同個路由，多個視圖就需要多個組件。確保正確使用components配置 (帶上s)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="header">
            <router-view name="header"></router-view>
        </div>
        <div class="body">
            <router-view name="left"></router-view>
            <router-view name="right"></router-view>
        </div>
        <div class="footer">
            <router-view name="footer"></router-view>
        </div>
    </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    headerc = Vue.extend({template:"<h1>header部分</h1>"})
    leftc = Vue.extend({template:"<h1>left部分</h1>"})
    rightc = Vue.extend({template:"<h1>right部分</h1>"})
    footerc = Vue.extend({template:"<h1>footer部分</h1>"})

    var router = new VueRouter({
        routes:[
            {path:"/", components:{   //這裏components是需要加s的
                header:headerc,   
                left:leftc,   
                right:rightc,   
                footer:footerc,  
            }}
        ]
    })
    new Vue({
        el:"#app",
        router:router,
    })
</script>

6、重定向和別名

重定向也是通過routes配置來完成，下面例子是從/a重定向到/b：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    var article = Vue.extend({template:"<h1>這是文章</h1>"})

    var router = new VueRouter({
        routes:[
            // redirect重定向   重定向至後面的地址 /article
            {path:"/", redirect:"/article"},
            //  alias:"/list"  路由重新取名字   地址改爲/list  顯示界面也和上面一樣
            {path:"/article", component:article, alias:"/list"},   
        ]
    })
    new Vue({
        el:"#app",
        router:router,
    })
</script>

重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

“重定向”的意思是，當用戶訪問/a時，URL將會被替換成/b，然後匹配路由爲/b。

/a的別名是/b，意味着，當用戶訪問/b時，URL會保持爲/b，但是路由匹配則爲/a，就像用戶訪問/a一樣。
上面對應的路由配置爲：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

7、node環境配置

nvm安裝：
nvm（Node Version Manager） 是一個用來管理node版本的工具。我們之所以需要使用node，是因爲我們需要使用node中的 npm(Node Package Manager)，使用npm的目的是爲了能夠方便的管理一些前端開發的包！nvm的安裝非常簡單，步驟如下：

到這個鏈接下載nvm的安裝包：https://github.com/coreybutler/nvm-windows/releases
然後點擊一頓下一步，安裝即可，安裝完成後，還需要配置環境變量。在我的電腦->屬性->高級系統設置->環境變量->系統環境變量->Path下新建一個，把nvm所處的路徑填入進去即可。
打開cmd，然後輸入nvm，如果沒有提示沒有找不到這個命令。說明已經安裝成功

Mac或者Linux安裝nvm請看這裏：https://github.com/creationix/nvm。也要記得配置環境變量

nvm常用命令

nvm常用命令：

nvm install [version]           ：安裝指定版本的node.js。
nvm use [version]               ：使用某個版本的node。
nvm list                        ：列出當前安裝了哪些版本的node。
nvm uninstall [version]         ：卸載指定版本的node。
nvm node_mirror [url]           ：設置nvm的鏡像。
nvm npm_mirror [url]            ：設置npm的鏡像。

node安裝：
安裝完nvm後，我們就可以通過nvm來安裝node了。這裏我們安裝10.16.0版本的的`node.js。

nvm install 10.16.0

這個域名的服務器是在國外。因此會比較慢,我們可以設置一下nvm的源,之後再下載指定版本。

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

npm

npm(Node Package Manager) 在安裝node的時候就會自動的安裝了。當時前提條件是你需要設置當前的node的版本：nvm use 10.16.0。然後就可以使用npm了.

初始化：
在新的項目中，需要先執行 npm init 初始化，創建一個package.json文件用來保存本項目中用到的包。

安裝包：
安裝包分爲全局安裝和本地安裝。全局安裝是安裝在當前node環境中，在可以在cmd中當作命令使用。而本地安裝是安裝在當前項目中，只有當前這個項目能使用，並且可以通過require引用。安裝的方式只有-g參數的區別：

npm install vue                 # 本地安裝
npm install vue --save          # 本地安裝，並且保存到package.json的dependice中
npm install vue --save-dev      # 本地安裝，並且保存到package.json的dependice-dev中
npm install vue -g              #全局安裝
npm install -g @vue/cli         #全局安裝vue-cli

本地安裝
1、將安裝包放在./node_modules下（運行 npm 命令時所在的目錄），如果沒有node_modules目錄，會在當前執行npm命令的目錄下生成node_modules目錄。
2、可以通過require()來引入本地安裝的包。

全局安裝
1、將安裝包放在/usr/local下或者你node的安裝目錄。
2、可以直接在命令行裏使用。

卸載包：
npm uninstall [package]

更新包：
npm update [package]

搜索包：
npm search [package]

使用淘寶鏡像：
npm的服務器在國外。那麼可以安裝一下cnpm，並且指定鏡像爲淘寶的鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org

以後就可以使用cnpm來安裝包了.

手動安裝npm：
有時候使用nvm安裝完node後，npm沒有跟着安裝，這時候可以到https://github.com/npm/cli/releases下載6.10.1的版本。然後下載完成後，解壓開來，放到v10.16.0/node_modules下，然後修改名字爲npm，並且把npm/bin中的npm和npm.cmd兩個文件放到v10.16.0根目錄下。

8、vue-cli的使用

vue-cli是和vue進行深度組合的工具，可以快速幫我們創建vue項目，並且把一些腳手架相關的代碼給我們創建好。真正使用vue開發項目，都是用vue-cli來創建項目的。

安裝：
Vue CLI需要Node.js 8.9或更高版本 (推薦8.11.0+)。node環境安裝後，直接通過npm install -g @vue/cli即可安裝。安裝完成後，輸入vue --version，如果出現了版本號，說明已經下載完成。

用命令行創建項目：
1、在指定路徑下使用vue create [項目名稱]創建項目。
2、會讓你選擇要安裝哪些包（默認是Babel和ESLint），也可以手動選擇。
3、如果在安裝的時候比較慢，可以在安裝的時候使用淘寶的鏈接：vue create -r https://registry.npm.taobao.org [項目名稱]。
4、如果實在不想在創建項目的時候都指定淘寶鏈接，可以在當前用戶目錄下，找到.npmrc，然後設置registry=https://registry.npm.taobao.org。

用界面創建項目：
打開cmd，進入到你項目存儲的路徑下。然後執行vue ui，就會自動打開一個瀏覽器界面。
按照指引進行選擇，然後一頓下一步即可創建。

項目結構介紹

node_modules ---------------------------：本地安裝的包的文件夾。
public ---------------------------------------：項目出口文件。
src -------------------------------------------：項目源文件：
assets----------------------------------------：資源文件，包括字體，圖片等。
components--------------------------------：組件文件。(項目中可以編寫的部分)
App.vue-------------------------------------：入口組件。
main.js--------------------------------------：webpack在打包的時候的入口文件。
babel.config.js----------------------------：es*轉低級js語言的配置文件。
package.json-----------------------------：項目包管理文件。

運行該vue-cli項目操作：

網頁界面顯示如下：

組件定義和導入：
1、定義：組件定義跟之前的方式是一模一樣的。只不過現在模板代碼專門放到.vue的template標籤中，所以不再需要在定義組件的時候傳入template參數。另外，因爲需要讓別的組件使用本組件，因此需要用export default將組件對象進行導出。
2、導入：因爲現在組件是在不同的文件中。所以如果需要引用，那麼必須進行導入。用ES6語法的import XXX from XXX。

局部樣式
默認情況下在.vue文件中的樣式一旦寫了，那麼會變成全局的。如果只是想要在當前的組件中起作用，那麼可以在style中加上一個scoped屬性即可。示例代碼如下：

// 這裏是組件的格式
<style scoped>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

body{
  /* 內外邊距 */
  margin:0; 
  padding: 0;  

  /* 字體大小 */
  font-size: 80px;
}
</style>

使用sass語法
很多在寫樣式代碼的時候，不喜歡用原生css，比較喜歡用比如sass或者less，這裏我們以sass爲例，我們可以通過以下兩個步驟來實現：

安裝loader：webpack在解析scss文件的時候，會去加載sass-loader以及node-loader，因此我們首先需要通過npm來安裝一下：
npm install [email protected] --save-dev
npm install [email protected] --save-dev

指定sass語言：在指定style的時候，添加lang="scss"屬性，這樣就會將style中的代碼識別爲scss語法。

//style這個模塊就是制定組件的格式
<style lang="stylus">    //這裏的lang="stylus"就是指定的語法

</style>

Vue前端框架的學習——06—(匹配404錯誤、嵌套路由、編程式導航、命名路由、命名視圖、重定向和別名、node環境配置和npm、vue-cli的使用)

1、匹配404錯誤：

2、嵌套路由：

3、編程式導航

4、命名路由

5、命名視圖

6、重定向和別名

7、node環境配置

npm

8、vue-cli的使用

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

Django框架學習——5—(數據庫、在Django中操作數據庫、實戰案例：圖書管理系統、ORM模型介紹)

Django框架學習——4—(DTL模板標籤、模版常用過濾器、模版結構優化、加載靜態文件)

Vue前端框架的學習——06—(匹配404錯誤、嵌套路由、編程式導航、命名路由、命名視圖、重定向和別名、node環境配置和npm、vue-cli的使用)

Flask項目實戰——4—(郵箱的驗證碼發送、Redis數據庫存儲驗證碼、郵箱修改功能、權限管理)

Django框架學習——3—(URL指定默認的參數、re_path函數、模板介紹、模板變量、常用標籤)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結