vue 配置路由規則和顯示路由

2022-08-20 03:18:17 字數 569 閱讀 2297

路由規則的配置在src/router/index.js中,可配置如下內容:

import  from 'vue-router'import home from '../views/home.vue'import about from '../views/about.vue'const routes =[

, ]const router =createrouter()

export

default router

home |

about

router-link和router-view是vue提供的元件;

router-link是鏈結到路由,最後會渲染成乙個a標籤,href指向的就是路由的路徑;

router-view是路由**的元件最終要顯示的乙個位置。

總結:router-link是負責引入元件,而router-view是元件最終要顯示的位置。

這種方式也是父子元件的關係,但和之前學的父子元件不一樣的是:他的子元件是動態的,根據路由不同而不同的;之前都是固定好的,父元件的子元件都是確定下來的。

vue路由配置,vue子路由配置

現在乙個專案已經部署完成,接下來我們從路由開始!還記得在初始化專案的時候,有提示是否需要安裝vue router,對沒錯,vue中路由全靠它!首先找到路由配置檔案 router index.js,是整個專案路由配置檔案 首先看最上面的,這個模組引入,es2015中的import.from.將你需要配...

Vue 路由配置和二級路由配置

我們初始化我們的vue專案後,開啟工程目錄src router下的index.js。我們可以把工程預設的helloworld.vue檔名,以及元件名更改。同樣也需要在index.js檔案中更改引入的檔名和元件名。index.js 需要更改的地方 import home from components...

vue路由配置

1.main.js the vue build version to load with the import command runtime only or standalone has been set in webpack.base.conf with an alias.import vue ...