Vue路由基础流程
路由就是通过用户点击路由加载对应的组件
1. 定义组件
2. 定义路由
3. 创建Router实例
4. 创建Vue挂载Router实例
div id="app">
<h1>My Router</h1>
<nav>
<!-- 使用router-link组件，在页面中会替换成a标签，to指向跳转的路由 -->
<router-link to="/home">Home</router-link>
<router-link to="/subPage">Sub</router-link>
</nav>
<!-- 路由组件的显示位置 -->
<router-view></router-view>
</div>
<!-- 定义组件 -->
<template id="home">
<div>
home page
</div>
</template>
<template id="sub">
<div>
sub page
</div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
// 第一步：定义组件
let home = {
template:"#home"
};
let sub = {
template:"#sub"
};
//第二步：定义路由
let routes = [
{path:"/home",component:home},
{path:"/subPage",component:sub}
];
//第三步：创建router实例，然后传入定义好的路由（`routes`配置）
let router = new VueRouter({
routes:routes
});
//第四步：创建和挂载实例，从而让整个应用都有路由功能
const app = new Vue({router:router}).$mount("#app");
</script>动态路由
例如不同的用户登录会有不同的标识userid，不可能为每一个userid来配置路由，所以需要动态路由来配置
<div id="app">
<h2>动态路由</h2>
<div>
<router-link to="/user/alice">Alice</router-link>
<router-link to="/user/bob">Bob</router-link>
</div>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
let User = {
template:`<div>User：{{$route.params.id}}</div>`,
watch:{
'$route'(to,from){
console.log('从'+from.params.id+'到'+to.params.id);
}
}
}
let router = new VueRouter({
routes:[
//前面/user/后面任意
{path:"/user/:id/",component:User}
]
});
const app = new Vue({router:router}).$mount("#app");
</script>改变路由会通过watch监听地址的改变：
从这个地址 file:///Users/xyb/Desktop/my02.html#/user/alice 跳到 file:///Users/xyb/Desktop//my02.html#/user/bob
嵌套路由
一个页面存在多个子路由，使用children属性把子路由放进去，点击其他路由刷新对应的组件view。
<div id="app">
<h3>嵌套路由</h3>
<div>
<router-link to="/home">首页中心</router-link>
<router-link to="/home/withdraw">提现</router-link>
<router-link to="/home/rechange">充值</router-link>
</div>
<router-view></router-view>
</div>
<template id="home">
<div>
<p>会员中心首页</p>
<router-view></router-view>
</div>
</template>
<template id="homeAll">
<div>
首页中心汇总
</div>
</template>
<template id="withdraw">
<div>会员中心提现</div>
</template>
<template id="rechange">
<div>会员中心充值</div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
let home = {
template:"#home"
}
let homeAll = {
template:"#homeAll"
}
let withdraw = {
template:"#withdraw"
}
let rechange = {
template:"#rechange"
}
let router = new VueRouter({
routes:[{path:"/home/",component:home,
children:[
{path:"",component:homeAll},
{path:"withdraw",component:withdraw},
{path:"rechange",component:rechange}
]
}]
})
let app = new Vue({router:router}).$mount("#app");
</script>路由跳转情况：
file:///Users/xyb/Desktop/my03.html
file:///Users/xyb/Desktop/my03.html#/home
file:///Users/xyb/Desktop/my03.html#/home/withdraw
file:///Users/xyb/Desktop/my03.html#/home/rechange
编程式路由
通过当前地址会自动push到一个新的地址。箭头返回当前地址，通过router.push操作传入 path 和 query ；
<div id="app">
<h3>Router</h3>
<div>
<router-link to="/user/peigon">peigon</router-link>
</div>
<router-view></router-view>
</div>
<template id="user">
<div>My Peigon</div>
</template>
<template id="regist">
<div>注册</div>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
let User = {template:"#user"}
let Regist = {template:"#regist"}
let router = new VueRouter({
routes:[
{path:"/regist",component:Regist},
{path:"/user/peigon",component:User}
]
})
let app = new Vue({router:router}).$mount("#app");
//path：路由，query：字段
/*
可以通过router.push来跳转路由，和router-link效果一样，这个方法会向history栈添加一新的记录
会直接跳转到一个新的路由
*/
router.push({path:"/regist",query:{plain:"private"}});
</script>命名路由
可以通过 name 标识一个路由的名字 <router-link :to="{name:'home'}"></router-link>
<div id="app">
<h1>Router 4</h1>
<div>
<!--可以通过一个名称标识一个路由-->
<router-link :to="{name:'home'}">Foo</router-link>
<router-link :to="{name:'subpage'}">SubPage</router-link>
<router-link :to="{name:'nav'},params:{id:123}">Nav</router-link>
</div>
<router-view></router-view>
</div>
<template id="home">
<div>
<p>首页</p>
</div>
</template>
<template id="subPage">
<p>子页</p>
</template>
<template id="nav">
<p>菜单</p>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
let Home = {
template: '#home'
}
let SubPage = {
template: '#subPage'
}
let Nav = {
template: '#nav'
}
let router = new VueRouter({
routes: [
{path: "/", name:'home',component: Home},
{path: "/subpage",name:'subpage',component:SubPage},
{path: "/nav",name:'nav',component:Nav}
]
});
const app = new Vue({ router: router }).$mount("#app");
</script>命名视图
<div id="app">
<h1>Router 4</h1>
<div>
<router-link to="/">Home</router-link>
<router-view name="sub">Subpage</router-view>
<router-view name="nav">Navicat</router-view>
</div>
<router-view></router-view>
</div>
<template id="home">
<div>
<p>首页</p>
</div>
</template>
<template id="subPage">
<p>子页</p>
</template>
<template id="nav">
<p>菜单</p>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
let Home = {
template: '#home'
}
let SubPage = {
template: '#subPage'
}
let Nav = {
template: '#nav'
}
let router = new VueRouter({
routes: [
{
path: "/", components: {
default:Home,
sub:SubPage,
nav:Nav
}
},
]
});
const app = new Vue({ router: router }).$mount("#app");
</script>