编程式导航
在 Vue 实例内部，你可以通过 $router 访问路由实例，可以调用 this.$router.push方法注入参数。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
<!--1、引入全局的VueRouter对象-->
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
// 2、让Vue使用该VueRouter对象,
// VueRouter还提供了两个全局的组件router-link和router-view
Vue.use(VueRouter);
// 3、定义局部组件
var UserP={
template:'<div><h1>我是用户1</h1></div>',
created(){
// 参数(query、params)都存储在组件的$route参数对象中
console.log(this.$route.params.userId)
}
};
var UserQ={
template:'<div><h1>我是用户2</h1></div>'
};
var my_router=new VueRouter({
routes:[
{
// 动态路由参数，以冒号开头
path:'/user/:userId', // 会加载 params中的参数
component:UserP,
name:'user_p',
},
{
path:'/user', // 会加载query参数，例如?userId=2
component:UserQ,
name:'user_q',
},
]
});
var App={
template:'' +
' <div>' +
' <button @click="paramsHandler">用户1</button>' +
' <button @click="queryHandler">用户2</button>' +
' <router-view></router-view>' +
'</div>',
methods:{
paramsHandler(){
this.$router.push({name:'user_p',params:{userId:123}})
},
queryHandler(){
this.$router.push({name:'user_q',query:{userId:321}})
},
}
};
new Vue({
el:'#app',
data:{
},
components:{
App
},
template:'<App/>',
router:my_router,
})
</script>
</html>嵌套路由
一个router-view嵌套另外一个router-view。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
<!--1、引入全局的VueRouter对象-->
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
// 嵌套路由：进入首页后，点击 音乐/home/music、电影/home/movie
Vue.use(VueRouter);
var Music={
template:'<div><h2>我是音乐</h2></div>'
};
var Movie={
template:'<div><h2>我是电影</h2></div>'
};
var Home={
template:'' +
'<div>' +
' <h1>我是主页面</h1>' +
' <router-link to="/home/music">音乐</router-link>' +
' <router-link to="/home/movie">电影</router-link>' +
' <router-view></router-view>' + // 渲染子组件视图
'</div>',
};
var my_router=new VueRouter({
routes:[
{
path:'/home',
component:Home,
name:'home',
//
children:[
// 子路由:动态路由匹配，表示你的子组件中的结构是不同的
{
path:'music',
component:Music,
},
{
path:'movie',
component:Movie,
}
]
},
]
});
var App={
template:'' +
' <div>' +
' <router-link :to="{name:\'home\'}">首页</router-link>' +
' <router-view></router-view>' +
'</div>',
};
new Vue({
el:'#app',
data:{
},
components:{
App
},
template:'<App/>',
router:my_router,
})
</script>
</html>动态路由
1、以命名方式绑定url并通过params/query传递参数；
2、在与url绑定的子组件中可以通过{{$route.params.arg}}取出参数。
# 简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
<!--1、引入全局的VueRouter对象-->
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
// 嵌套路由：进入首页后，点击 音乐/home/music、电影/home/movie
Vue.use(VueRouter);
var Home={
template:'' +
'<div>' +
' <h1>我是主页面</h1>' +
' <p>ID：{{$route.params.id}}</p>' +
'</div>',
};
var my_router=new VueRouter({
routes:[
{
path:'/home/:id',
component:Home,
name:'home'
},
]
});
var App={
template:'' +
' <div>' +
// url传递参数，在子组件Home中可以通过{{$route.params.id}}取出参数
' <router-link :to="{name:\'home\',params:{id:\'123\'}}">首页</router-link>' +
' <router-view></router-view>' +
'</div>',
};
new Vue({
el:'#app',
data:{
},
components:{
App
},
template:'<App/>',
router:my_router,
})
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
<!--1、引入全局的VueRouter对象-->
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(VueRouter);
var Common={
template:'<div class="content">{{ $route.params.id }}页面</div>',
// created(){
// console.log(this.$route)
// }
};
var Home={
template:'' +
'<div>' +
' <h1>我是主页面</h1>' +
// 利用动态路由，向同一个组件传递不同的参数
' <router-link :to="{name:\'sub_title\', params:{id:\'android\'}}">安卓</router-link>' +
' <router-link :to="{name:\'sub_title\', params:{id:\'web\'}}">web前端</router-link>' +
' <router-view></router-view>' +
'</div>',
};
var my_router=new VueRouter({
routes:[
{
path:'/home',
component:Home,
children:[
{
path:'/home/:id',
component:Common,
name:'sub_title',
}
]
},
]
});
var App={
template:'' +
' <div>' +
// url传递参数，在子组件Home中可以通过{{$route.params.id}}取出参数
' <router-link to="/home"">首页</router-link>' +
' <router-view></router-view>' +
'</div>',
};
new Vue({
el:'#app',
data:{
},
components:{
App
},
template:'<App/>',
router:my_router,
})
</script>
</html>keep-alive缓存组件
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试</title>
<script src="vue.js"></script>
<!--1、引入全局的VueRouter对象-->
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(VueRouter);
var Pins={
template:'' +
' <div>' +
' <h1 @click="change_handle">我是沸点页面</h1>' +
' </div>',
methods:{
change_handle:function(e){
e.target.style.color='red'
},
},
created(){
console.log('Pins 创建')
},
mounted(){
console.log('Pins 加载到dom')
},
beforeDestroy(){
console.log('Pins 被销毁')
}
};
var Home={
template:'' +
'<div>' +
' <h1>我是主页面</h1>' +
'</div>',
created(){
console.log('Home 创建')
},
mounted(){
console.log('Home 加载到dom')
},
beforeDestroy(){
console.log('Home 被销毁')
}
};
var my_router=new VueRouter({
routes:[
{
path:'/home',
component:Home,
},
{
path:'/pins',
component:Pins,
}
]
});
var App={
template:'' +
' <div>' +
' <router-link to="/home"">首页</router-link>' +
' <router-link to="/pins"">沸点</router-link>' +
// 包裹动态组件router-view，其内部的组件实例会缓存起来，不会被销毁
'<keep-alive>' +
'<router-view></router-view>' +
'</keep-alive>' +
'</div>',
};
new Vue({
el:'#app',
data:{
},
components:{
App
},
template:'<App/>',
router:my_router,
})
</script>
</html>