vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由
Vue中的路由
VueRouter
路由:根據請求的路徑按照一定的路由規則 進行的請求轉發 從而幫助我們實現請求的管理
作用:在vue中實現元件的動態切換
線上引入路由的cdn:
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 根據連線切換不同的路由元件 -->
<a href="#/login">點我登入</a>
<a href="#/register">點我註冊</a>
<!--顯示路由的元件-->
<router-view></router-view>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//建立登入的元件
const login = {
template:" <div> <h1>登入</h1> </div> "
};
//建立註冊的元件
const register = {
template:" <div> <h1>註冊</h1> </div> "
};
//建立路由物件
const route = new VueRouter({
// routes !!! 非 routers
routes:[
//路由規則 設定請求路徑 path: 路由的路徑 component:路徑對應的元件
{path:'/login',component:login},
{path:'/register',component: register}
]
});
//建立Vue例項
const app = new Vue({
el:"#app",
data:{},
methods: {},
components: {
//註冊元件
login,
register
},
//註冊路由物件
router:route
});
</script>
</body>
</html>
router-link
作用:用來替換我們在切換路由時a標籤切換路由 不需要手動加入 #
1.router-link 用來替換使用a標籤實現路由切換 好處是不需要書寫#號直接書寫路由路徑
2.router-link to屬性用來書寫路由路徑 tag屬性:用來將router-link渲染成指定的標籤
預設路由
path:'/' ,redirect:'/***'
作用:用來第一次接入介面所展示的一個預設的元件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 根據連線切換不同的路由元件 -->
<!--router-link 好處:書寫路由路徑不需要# to: 用來書寫路由路徑 -->
<router-link to="/login" >我要登入</router-link>
<router-link to="/register" >點我註冊</router-link>
<!--顯示路由的元件-->
<router-view></router-view>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//建立登入的元件
const login = {
template:" <div> <h1>登入</h1> </div> "
};
//建立註冊的元件
const register = {
template:" <div> <h1>註冊</h1> </div> "
};
const def= {
template: " <div> <h1>預設顯示的元件</h1> </div> "
};
//建立路由物件
const route = new VueRouter({
// routes !!! 非 routers
routes:[
//路由規則 設定請求路徑 path: 路由的路徑 component:路徑對應的元件
{path: '/' ,redirect:'/def'},
{path:'/def',component: def},
{path:'/login',component:login},
{path:'/register',component: register}
]
});
//建立Vue例項
const app = new Vue({
el:"#app",
data:{},
methods: {},
components: {
//註冊元件
login,
register,
def
},
//註冊路由物件
router:route
});
</script>
</body>
</html>
路由中引數的傳遞
通過?號形式拼接引數 和 採用restful風格 拼接引數
使用? 形式拼接引數時
元件獲取引數 $route.query.引數名
使用restful 傳遞引數時
路由規則:var router = new VueRouter({ routes:[ {path:'/register/:引數名/:引數名',component:元件物件} //定義路徑中獲取對應引數 ] });
元件獲取引數 $route.params.引數名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用?拼接-->
<router-link to="/login?id=999&name=小新" >我要登入</router-link>
<!-- 使用restful風格-->
<router-link to="/register/111/小白" >點我註冊</router-link>
<!--顯示路由的元件-->
<router-view></router-view>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//建立登入的元件
const login = {
template:'<h1>使用者登入{{ this.$route.query.id }} {{ this.$route.query.name }}</h1>',
};
//建立註冊的元件
const register = {
template:'<h1>使用者註冊 {{ $route.params.id }} {{ $route.params.name }}</h1>',
created(){
console.log("註冊元件中id: "+this.$route.params.id+this.$route.params.name);
}
};
const def= {
template: " <div> <h1>預設顯示的元件</h1> </div> "
};
//建立路由物件
const route = new VueRouter({
// routes !!! 非 routers
routes:[
//路由規則 設定請求路徑 path: 路由的路徑 component:路徑對應的元件
{path: '/' ,redirect:'/def'},
{path:'/def',component: def},
{path:'/login',component:login},
{path: '/register/:id/:name', component: register}
]
});
//建立Vue例項
const app = new Vue({
el:"#app",
data:{},
methods: {},
components: {
//註冊元件
login,
register,
def
},
//註冊路由物件
router:route
});
</script>
</body>
</html>
巢狀路由的使用
1.宣告最外層路由和最內層路由
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品新增</router-link>
<router-link to="/product/del">商品刪除</router-link>
<router-view></router-view>
</div>
</template>
建立路由物件含有巢狀路由
const router = new VueRouter({ routes:[ { path:'/product', //父元件的路徑 component:product, //父元件 children:[ //子元件 {path:'add',component: add}, //子元件的路由路徑 {path:'del',component: del}, ] }, ] });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>巢狀路由的使用</title>
</head>
<body>
<div id="app">
<router-link to="/product">商品管理</router-link>
<!--顯示路由的元件-->
<router-view></router-view>
</div>
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品新增</router-link>
<router-link to="/product/del">商品刪除</router-link>
<router-view></router-view>
</div>
</template>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//建立最外層元件
const product = {
template:'#product',
};
const add = {
template:'<h4>商品新增</h4>'
};
const del = {
template:'<h4>商品編輯</h4>'
};
//定義路由物件
const router = new VueRouter({
routes:[
{
path:'/product',
component:product,
children:[
{path:'add',component: add},
{path:'del',component: del},
]
},
]
});
//建立Vue例項
const app = new Vue({
el:"#app",
data:{},
methods: {},
//註冊路由物件
router:router
});
</script>
</body>
</html>
相關文章
- vue-router 巢狀路由Vue巢狀路由
- 3 vite vue-router 路由巢狀ViteVue路由巢狀
- vue路由巢狀Vue路由巢狀
- Vue之動態路由、巢狀路由Vue路由巢狀
- vue（19）巢狀路由Vue巢狀路由
- Vue.js 2.x筆記：路由Vue Router（6）Vue.js筆記路由
- vue 路由vue RouterVue路由
- 4、vue-router之什麼是巢狀路由Vue巢狀路由
- 一個vue路由引數傳遞的注意點Vue路由
- vue 基礎入門筆記 18:路由巢狀Vue筆記路由巢狀
- Vue-Router學習第二彈動態路由\懶載入\巢狀路由Vue路由巢狀
- 淺談Vue-router使用方法及動態路由和巢狀路由的使用Vue路由巢狀
- 路由元件傳遞引數路由元件
- vue學習筆記（七）---- vue中的路由Vue筆記路由
- Vue總結第五天：vue-router （使用模組化（建立Vue元件）機制程式設計）、router-link 標籤的屬性、路由程式碼跳轉、懶載入、路由巢狀（子路由）、路由傳遞資料、導航守衛）Vue元件程式設計路由巢狀
- vue學習十四(巢狀路由、命名路由、命名檢視、重定向)Vue巢狀路由
- vue-router路由基礎Vue路由
- vue全家桶 ---vue-router路由篇Vue路由
- Vue路由傳參Vue路由
- vue路由例項（vue-router）（vue版本2.9.2）Vue路由
- 一起學Vue：路由(vue-router)Vue路由
- vue--vue-router 元件對映到路由Vue元件路由
- vue-router 原始碼：路由模式Vue原始碼路由模式
- vue-router 原始碼：前端路由Vue原始碼前端路由
- angular 巢狀路由Angular巢狀路由
- vue常用操作及學習筆記（路由跳轉及路由傳參篇）Vue筆記路由
- 06 . Vue路由簡介,原理,實現及巢狀路由,動態路由,程式設計式導航Vue路由巢狀程式設計
- vue - Vue路由Vue路由
- 032、Vue3+TypeScript基礎，巢狀子路由和query傳參VueTypeScript巢狀路由
- Vue路由Vue路由
- vue router 引入多個路由檔案Vue路由
- vue router路由自定義後退事件Vue路由事件
- vue-router控制路由許可權Vue路由
- vue-router路由之路-極簡教程Vue路由
- 手撕Vue-Router-提取路由資訊Vue路由
- Vue Router 4與路由管理實戰Vue路由
- vue2.0學習筆記（八）：vue-router 路由配置（1）–基礎篇Vue筆記路由
- Vue學習筆記之路由篇Vue筆記路由