国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-router頁面跳轉 以及頁面配置

qpwoeiru96 / 3065人閱讀

摘要：創(chuàng)建實例，然后傳配置你還可以傳別的配置參數(shù)不過先這么簡單著吧。創(chuàng)建實例及配置，即。

昨天自己在家做了一個前端上線系統(tǒng)，使用到的技術有VUE框架，element-ui, vue-router
傳送門：https://github.com/liyang1234...
頁面效果如下：

其中的router的使用方法和一些配置文件 webpack入口文件main.js,router的index.js內容如下：

使用router

官方例子






    
Hello App!

    

        
        
        
        Go to Foo
        Go to Bar

router-link標簽：跳轉的鏈接，to=""是必須的屬性，雙引號中的內容是我們接下來在JS文件中定義的路由path。

router-view標簽：展示我們匹配到的組件的區(qū)域

router-link的一些屬性

//to屬性 string|object

Home

Home
 

Home

Home
 

User
 

Register
 
//replace屬性 true|false 不留下 history 記錄。
Home
 
//append屬性 true|false 追加路徑
Home
 
//tag屬性 string 設置渲染標簽
foo


  • foo
    • 
 
//active-class 屬性 string 激活時使用的 CSS 類名

    // 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
     
    // 1. 定義（路由）組件。
    // 也可以從其他文件 import 進來
    const Foo = { template: "
    foo
    " }
    const Bar = { template: "
    bar
    " }
     
    // 2. 定義路由
    // 每個路由應該映射一個組件。 其中"component" 可以是
    // 通過 Vue.extend() 創(chuàng)建的組件構造器，
    // 或者，只是一個組件配置對象。
    const routes = [
        { path: "/foo", component: Foo },
        { path: "/bar", component: Bar }
    ]
     
    // 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
    // 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
    const router = new VueRouter({
        routes // （縮寫）相當于 routes: routes
    })
     
    // 4. 創(chuàng)建和掛載根實例。
    // 記得要通過 router 配置參數(shù)注入路由，
    // 從而讓整個應用都有路由功能
    const app = new Vue({
        router
    }).$mount("#app")
     
    // 現(xiàn)在，應用已經啟動了！

    JavaScript文件主要做的事情是：
    定義路由列表，即routes。創(chuàng)建router實例及router配置，即router。創(chuàng)建和掛載根實例。
    以上只是教我們用最簡單的方法使用vue-router。但實際開發(fā)過程中，首先我們的vue組件顯然不會只有一個template模板這么簡單，會用到vue的單文件組件；
    其次我們通常會希望的范圍是整個頁面，而不是像現(xiàn)在這樣一直有幾個礙眼的導航存在于頁面上，這就需要先定義好默認狀態(tài)下顯示的內容。

    既然是單頁應用（SPA），那么整個項目有以下三個文件是必要的:
    一個html文件：index.html
    一個webpack打包時的入口js文件：main.js
    一個根vue組件，作為其他組件的掛載點：app.vue

    用vue-cli生成webpack打包的vue項目

    npm install webpack -g
npm install vue-cli -g
//打開要創(chuàng)建的項目路徑目錄，創(chuàng)建項目
vue init webpack-simple <項目名>
cd <項目名>
npm install vue-router --save
npm run dev

    生成的項目類似這樣的：

    在components下面新建兩個vue文件 index.vue和hello.vue

    //index.vue



//hello.vue

    修改main.js文件

    //引入并安裝vue-router插件
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
//引入index.vue和hello.vue組件
import App from "./App.vue";
import index from "./components/index.vue";
import hello from "./components/hello.vue";
//定義路由
const routes = [
 {path:"/",component:App},
 { path: "/index", component: index },
 { path: "/hello", component: hello }
]
//創(chuàng)建 router 實例，然后傳 routes 配置
const router=new VueRouter({
routes
});
//創(chuàng)建和掛載根實例。通過 router 配置參數(shù)注入路由，從而讓整個應用都有路由功能
new Vue({
el:"#app",
router
});

    修改App.vue

    修改index.html

    


 
 vue-webpack-simple

    運行效果如下：

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98134.html

    相關文章

    • vue-router頁面跳轉 以及頁面配置

      摘要：創(chuàng)建實例，然后傳配置你還可以傳別的配置參數(shù)不過先這么簡單著吧。創(chuàng)建實例及配置，即。 昨天自己在家做了一個前端上線系統(tǒng)，使用到的技術有VUE框架，element-ui, vue-router傳送門：https://github.com/liyang1234...頁面效果如下： showImg(https://segmentfault.com/img/bVbhLN4?w=1297&h=66...

      molyzzx 評論0 收藏0

    • vue-router頁面跳轉 以及頁面配置

      摘要：創(chuàng)建實例，然后傳配置你還可以傳別的配置參數(shù)不過先這么簡單著吧。創(chuàng)建實例及配置，即。 昨天自己在家做了一個前端上線系統(tǒng)，使用到的技術有VUE框架，element-ui, vue-router傳送門：https://github.com/liyang1234...頁面效果如下： showImg(https://segmentfault.com/img/bVbhLN4?w=1297&h=66...

      付倫 評論0 收藏0

    • 從頭開始學習vue-router

      摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉對應路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

      tommego 評論0 收藏0

    • 從頭開始學習vue-router

      摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉對應路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

      jhhfft 評論0 收藏0

    • 從頭開始學習vue-router

      摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉對應路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

      frontoldman 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <