1. 程式人生 > >vue.js 初次路由顯示設定

vue.js 初次路由顯示設定

①設定 path 為 ‘/’

const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},             //頁面第一顯示的元件
    {path:'/menu',name:'menu',component:Menu},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

②設定  redirect  的值(適用於 二級路由)
 

const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},
    {path:'/about',name:'about',component:About,redirect:{name:'contactLink'},children:[   //二級路由
        {path:'/about/contact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
      ]},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

相關推薦

vue.js 初次路由顯示設定

①設定 path 為 ‘/’ const router= new VueRouter({ routes:[ {path:'/',name:'home',component:Home}, //頁面第一顯示的元件 {path:'/

使用Vue.js初次真正項目開發-2018/07/14

復雜 清晰 計算屬性 img ted 無法 傳遞 ava script 一、組件化 使用Vue.js進行開發,按照MVVM模式,圍繞數據為核心,進行開發。 開發過程根據業務和功能組件化,組件化一方面讓我們開發思路更加清晰,另一方面對於數據的處理和控制變得更加簡單,畢竟一

vue.js通過路由跳轉傳參,重新整理頁面引數丟失

問題:vue.js路由跳轉,跳轉頁面重新整理後引數丟失,沒有資料,怎麼解決?? 出現的情況:從新聞列表頁面進入某一條新聞得詳情頁,需要在路由跳轉時給詳情頁面傳送該條新聞得ID,然後詳情頁獲取ID想後臺請求資料將內容展示,還有商品詳情頁等等~ 下面寫了一個小例子,是模擬專案的新聞列表和詳情頁,

Vue.js框架--路由模組化(二十六)

主要操作技能:   1>建立資料夾\router.js檔案      2>寫入相關路由配置 router.js import Vue from 'vue' //0. 使用路由 import VueRouter from 'vue-

Vue.js路由系統

Vue.js生態之vue-router vue-router是什麼? vue-router是Vue的路由系統,定位資源的,我們可以不進行整頁重新整理去切換頁面內容。 vue-router的安裝與基本配置 vue-router.js 可以下載 也可以用cdn,基本配置資訊看如下程式碼 // ht

Vue.js框架--路由程式設計式的導航 和History 模式(十九)

主要操作技能: 一、程式設計式的導航        除了使用 <router-link> 建立 a 標籤來定義導航連結,    我們還可以藉助 router 的例項方法,通過編寫程式碼來實現   點選 <router-link :to="..."&g

Vue.js動態路由間切換回到頂部

方案1 使用官方的滾動行為,但是必須開啟HTML5 history 模式,開啟HTML5 history 模式需要後端進行一些配置; 對於所有路由導航,簡單地讓頁面滾動到頂部: scrollBehavior (to, from, savedPosition) { return { x

Vue.js(五) 路由(vue-router)

官方文件:https://router.vuejs.org/zh/installation.html 一:簡介 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合,讓構建單頁面應用變得易如反掌。包含的功能有: 巢狀的路由/視圖

Vue.js搭建路由報錯 router.map is not a function

錯誤: 出現問題原因:2.0已經沒有map這個方法了,只有1.0相容該方法。 解決方法: (1)方法1:使用命令npm install [email protected]相容1.0版本vu

使用Vue.js初次真正專案開發-2018/07/14

一、元件化 使用Vue.js進行開發,按照MVVM模式,圍繞資料為核心,進行開發。 開發過程根據業務和功能元件化,元件化一方面讓我們開發思路更加清晰,另一方面對於資料的處理和控制變得更加簡單,畢竟一個大功能交給一個元件去實現,總是會顯得很複雜,但是將大功能進行細分,交給多個人,每個人負責不同的小功能,就會

vue.js 二級路由/三級路由

為什麼要用二級和三級路由? 當專案中 有多個 <router-view> 時,就必須使用分級路由; 如果路由不分級,又有多個 <router-view> ,全部都是定義為一級路由,那麼專案中的  <router-view> 的內容顯示就

Vue.js框架路由練習

/*定義元件*/ const home = { template: '#home', props:{ info:Array,

vue.js圖片無法顯示問題總結

1。data資料裡的寫法: js裡的應該是要寫成 url: require('../../assets/workbench/1.png') 如: <script> export default { name: 'hello', data () {

Vue-router學習筆記——遇到的坑(一)history模式重新整理/設定巢狀路由顯示404/cannot find(webpack配置)

前端路由有兩種,一種是hash模式,一種是history模式。 這兩種模式的url路徑都不需要真實存在,只需要為前端跳轉做一個顯示。 hash模式的url路徑會帶有#,看起來不太舒服且不好做SEO,但是因為瀏覽器向伺服器請求時會自動忽略#後面的值,所以在瀏覽器中重新整理還是

vue.js路由

() 組件 其他 文檔 script 不同 -c target pre Vue.js 路由 Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。 通過 Vue.js 可以實現多視圖的單頁Web應用(single page web application,SPA)。

Vue.js 移入mouseenter顯示當前內容

his -- span 出現 paper 分享 位置 div osi 樣式比較醜,勿噴! 鼠標移到第二個,左邊背景就顯示當前內容。 鼠標移到第三個,左邊背景就顯示當前內容。 如下圖: window.vue 組件:就是要顯示內容的組件。 <style scop

vue.js用select實現省,市,提交後,默認顯示省,市信息

scrip item use this res cnblogs alert var option <select v-model="citys" name="cityVal" @change="schoolName(citys)"> <opt

vue.js路由參數簡單實例講解------簡單易懂

.com route 安裝 http git node clas span ont vue中,我們構建單頁面應用時候,一定必不可少用到vue-router vue-router 就是我們的路由,這個由vue官方提供的插件 首先在我們項目中安裝vue-router路由依賴

vue-cli之路由獨立成JS文件之後,如何在路由中獲取vuex屬性或者設置國際化i18n的當前使用語言

out 數據 blog tor 使用 common -- ges 如何 國際化vue-i18n的使用: import Vue from ‘vue‘; import VueI18n from ‘vue-i18n‘; // 引入語言包 import zh from ‘@/co

vue.js-路由

import end this theme str The ram class color 1:編寫router.js import Router from "vue-router" import Vue from "vue" import router from ".