vue路由學習
一.文章導讀
路由的本質就是一種對應關係，在代碼程序中，一個a標籤跳轉頁面，裏面a標籤裏面須要寫對用頁面的路徑，或者寫跳轉後臺的服務。那麼這個路徑就與頁面相對應，咱們能夠將它視爲路由的一種形式。javascript
路由分爲前端路由和後端路由css
- 後端路由是由服務器端進行實現，並完成資源的分發
- 前端路由是依靠hash值(錨連接)的變化進行實現
下面學習vue的路由管理器：Vue Routerhtml
二.路由入門實例
1. 選項卡案例
<body>
<div id="app">
<!-- 定義table選項卡頭 #號表明錨點必須 -->
<a href="#/tab1">tab1</a>
<a href="#/tab2">tab2</a>
<a href="#/tab3">tab3</a>
<a href="#/tab4">tab4</a>
<!-- 定義內容 -->
<div class="tablebody">
<!-- 根據 tablename的值變換而變換顯示組件 -->
<component :is="tablename"></component>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
定義四個組件模板,與a標籤一一對應
*/
const tab1 = {
template: '<strong>table01</strong>'
}
const tab2 = {
template: '<strong>table02</strong>'
}
const tab3 = {
template: '<strong>table03</strong>'
}
const tab4 = {
template: '<strong>table04</strong>'
}
const vm = new Vue({
el: "#app",
data: {
tablename: "tab1"
},
// 註冊 私有組件
components: {
tab1,
tab2,
tab3,
tab4
}
});
//window.onhashchange 獲取最新的hash值並將hash值截取將該值賦值給實例的 tablename
window.onhashchange = function() {
// location.hash 獲取當前最新的hash值
console.log(location.hash);
// 截取hash值賦值給 tablename
vm.tablename = location.hash.slice(2);
/* switch(location.hash.slice(1)){
case '/tab1':
vm.tablename = 'tab1'
break
case '/tab2':
vm.tablename = 'tab2'
break
case '/tab3':
vm.tablename = 'tab3'
break
case '/tab4':
vm.tablename = 'tab4'
break
} */
}
</script>
<!-- // 加點樣式 -->
<style type="text/css">
#app {
width: 500px;
height: 300px;
border: 1px solid black;
}
#app a {
display: inline-block;
width: 100px;
padding: 10px;
}
.tablebody {
margin-top: 20px;
text-align: center;
background-color: aliceblue;
height: 240px;
}
</style>
</body>
三.Vue Router使用
1.Router簡介
它是一個Vue.js官方提供的路由管理器。是一個功能更增強大的前端路由器，推薦使用。
Vue Router和Vue.js很是契合，能夠一塊兒方便的實現SPA(single page web application,單頁應用程序)應用程序的開發。
Vue Router依賴於Vue，因此須要先引入Vue，再引入Vue Router前端
Vue Router的特性：
支持H5歷史模式或者hash模式
支持嵌套路由
支持路由參數
支持編程式路由
支持命名路由
支持路由導航守衛
支持路由過渡動畫特效
支持路由懶加載
支持路由滾動行爲vue
2.Vue Router使用
<html>
<head>
<meta charset="utf-8">
<title>vueRouter使用</title>
<!-- // 第一步導入vue-router_3.0.2.js vue-router依賴於vue.js 在後面導入 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 第二步 將上面的代碼copy一下-->
<div id="app">
<!--
將原先的a標籤修改成 <router-link> 標籤
router-link至關於a標籤中的a to至關於href
-->
<router-link to="/tab1">tab1</router-link>
<router-link to="/tab2">tab2</router-link>
<router-link to="/tab3">tab3</router-link>
<router-link to="/tab4">tab4</router-link>
<!-- 定義內容 -->
<div class="tablebody">
<!-- 3. 添加路由佔位符,存放組件 -->
<router-view></router-view>
<!-- <component :is="tablename"></component> -->
</div>
</div>
</div>
<script type="text/javascript">
/*
定義四個組件模板,與a標籤一一對應
*/
const tab1 = {
template: '<strong>table01</strong>'
}
const tab2 = {
template: '<strong>table02</strong>'
}
const tab3 = {
template: '<strong>table03</strong>'
}
const tab4 = {
template: '<strong>table04</strong>'
}
/*
建立路由 並綁定定義的組件模板
*/
var myRouter = new VueRouter({
//routes是路由規則數組
routes:[
//每個路由規則都是一個對象，對象中至少包含path和component兩個屬性
//path表示 路由匹配的hash地址，component表示路由規則對應要展現的組件對象
{path:"/tab1",component:tab1},
{path:"/tab2",component:tab2},
{path:"/tab3",component:tab3},
{path:"/tab4",component:tab4},
]
});
new Vue({
el:"#app",
// 在實例中掛載路由對象
router:myRouter
})
</script>
<style type="text/css">
#app {
width: 500px;
height: 300px;
border: 1px solid black;
}
#app router-link {
width: 100px;
padding: 10px;
}
.tablebody {
margin-top: 20px;
text-align: center;
background-color: aliceblue;
height: 240px;
}
</style>
</body>
</html>
注意:導入的vue-router_3.0.2.js 依賴於vue.js,且必須在建立路由以前導入java
3.嵌套路由
在前面組件學習中，咱們間接的瞭解到了父組件和子組件的概念，那麼在一個路由實例中存在這另外一個子路由，咱們將他們稱之爲嵌套路由git
<html>
<head>
<meta charset="utf-8">
<title>嵌套路由</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/user">user</router-link>
<router-link to="/login">login</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
// 建立 user 模板
const User = {
template: `
<div>
this is user
</div>
`
};
// 定義login 父模板模板 login模板中寫了定義了兩個子路由
const Login = {
template: `
<div>
<h1>this is Login</h1>
<hr>
<router-link to="/login/pwd">帳號密碼登陸</router-link>
<router-link to="/login/phone">掃碼登陸</router-link>
<router-view></router-view>
</div>
`
};
// 定義帳號登陸子路由組件
const account = {
template: `
<div>
帳號：<input type="text"><br>
密碼：<input type="text">
</div>
`
}
// 定義掃碼子路由組件
const phone = {
template: `
<div>
<img src = "img/2.jpg" width = "50px">
</div>
`
}
// 建立路由對象
const myRouter = new VueRouter({
routes: [{
path: "/",
redirect: "/user"
},
{
path: "/user",
component: User
},
{
path: "/login",
component: Login,
// 定義子路由
children: [{
path: "/login/pwd",
component: account
},
{
path: "/login/phone",
component: phone
},
]
},
]
})
new Vue({
el: "#app",
// 掛載路由
router: myRouter
})
</script>
</body>
</html>
4.動態路由
<body>
<div id="app">
<!-- 定義四個 router-link 標籤 -->
<router-link to="/user/1">點擊1</router-link>
<router-link to="/user/2">點擊2</router-link>
<router-link to="/user/3">點擊3</router-link>
<router-link to="/user/4">點擊4</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
template: "<div>用戶:{{$route.params.id}}</div>"
}
// 建立路由對象
const myRouter = new VueRouter({
routes: [
// {path:"/",redirect:"/user"},
{
// 在路徑上帶一個id至關於帶一個值達到動態路由的效果
path: "/user/:id",
component: User
}
]
});
new Vue({
el: "#app",
router: myRouter
})
</script>
</body>
上面的代碼咱們直接使用 $route.params.id 獲取路由中傳的參數值，除此以外，咱們還能夠經過props傳值web
<body>
<div id="app">
<!-- 定義四個 router-link 標籤 -->
<router-link to="/user/1">點擊1</router-link>
<router-link to="/user/2">點擊2</router-link>
<router-link to="/user/3">點擊3</router-link>
<router-link to="/user/4">點擊4</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 上面的代碼咱們直接使用 $route.params.id 獲取路由傳的值，除此以外，咱們還能夠經過props傳值
var User = {
props: ["id"],
// 使用props傳值，在頁面中使用{{}}就能夠
template: "<div>用戶：{{id}}</div>"
}
// 建立路由實例 制定路由規則
var myRouter = new VueRouter({
routes:[
// props:true 啓用 props
{path:"/user/:id",component:User,props:true}
]
})
new Vue({
el: "#app",
data:{
id:1
},
//在app實例中掛載路由
router:myRouter
})
</script>
</body>
5.路由別名
<body>
<div id="app">
<!-- 在前臺使用v-bind綁定 路由綁定使用別名name:'user' -->
<router-link :to="{ name:'user' , params: {id:111} }">111</router-link>
<router-link :to="{ name:'user' , params: {id:222} }">222</router-link>
<router-link :to="{ name:'user' , params: {id:333} }">333</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
props:["id"],
template:"<div>用戶: {{id}}</div>"
}
var myRouter = new VueRouter({
routes:[
{
// name 爲取的別名
path:"/user/:id",component:User,name:"user",props:true
}
]
});
new Vue({
el:"#app",
// 路由掛載
router:myRouter
})
</script>
</body>
6.編程式導航
頁面導航的兩種方式：vue-router
- 聲明式導航：經過點擊連接的方式實現的導航
- 編程式導航：調用js的api方法實現導航
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );//n爲數字，參考history.go
this.$router.go( -1 );
dmeo演示編程
<body>
<div id="app">
<router-link :to="{ name:'user' , params: {id:1} }">user1</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
props:["id"],
template: `
<div>用戶:{{id}}<br>
<span @click="test01">編程試導航測試1</span>
<span @click="test02">編程試導航測試2</span>
</div>
`,
methods:{
// 採用js編程式導航
test01:function(){
this.$router.push("/test01");
},
test02:function(){
this.$router.push("/test02");
}
}
}
//
var Test01 = {
template:`
<span>測試01</span>
`
}
var Test02 = {
template:`
<span>測試02</span>
`
}
// 建立路由 並制定規則
var myRouter = new VueRouter({
routes:[
{
path:"/user",component:User,name:'user',props:true
},
{
path:"/test01",component:Test01,name:'test01',props:true
},
{
path:"/test02",component:Test02,name:'test02',props:true
}
]
});
new Vue({
el:"#app",
router:myRouter
})
</script>
</body>
gitee地址：https://gitee.com/li_shang_shan/vue-routing-learning
相關文章
- 1. vue路由學習
- 2. vue學習七：vue路由
- 3. Vue路由,學習路徑
- 4. Vue路由中的子路由學習
- 5. vue學習記錄③（路由）
- 6. vue學習路由嵌套
- 7. 學習路由器vue-router
- 8. 學習vue路由（詳解）
- 9. vue學習筆記(二) 路由學習
- 10. Vue學習筆記之 路由路徑
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue路由學習
- 2. vue學習七：vue路由
- 3. Vue路由,學習路徑
- 4. Vue路由中的子路由學習
- 5. vue學習記錄③（路由）
- 6. vue學習路由嵌套
- 7. 學習路由器vue-router
- 8. 學習vue路由（詳解）
- 9. vue學習筆記(二) 路由學習
- 10. Vue學習筆記之 路由路徑