路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/news">News</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</div>
<template id="home">
<div>
<div>首页</div>
<router-link to="/home/login">Login</router-link>
<router-link to="/home/reg">Reg</router-link>
<!-- 路由出口 -->
<!-- 登录和注册会显示在这里 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>新闻</div>
</template>
<template id="login">
<div>登录</div>
</template>
<template id="reg">
<div>注册</div>
</template>
<script>
//1.定义路由组件
const Home={template:'#home'}
const News={template:'#news'}
const Login={template:'#login'}
const Reg={template:'#reg'}
//2.定义路由和组件的映射关系
const routes=[
{
path:'/',
redirect:'/home'
},
{path:'/home',component:Home,
children:[
{path:'/home',redirect:'/home/login'},
{path:'/home/login',component:Login},
{path:'/home/reg',component:Reg}
]},
{path:'/news',component:News}
]
//3.定义路由实例
const router = new VueRouter({
routes
})
//4.把路由实例挂载在vue实例中
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</body>
</html>
路由传参
$route.params.id获取路由上的参数 在js里定义路由组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/news">News</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</div>
<template id="home">
<div>
<div>首页</div>
<router-link to="/home/login">Login</router-link>
<router-link to="/home/reg">Reg</router-link>
<!-- 路由出口 -->
<!-- 登录和注册会显示在这里 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>
<div>新闻页</div>
<ul>
<li>
<router-link to="/news/detail/001">新闻1</router-link>
<router-link to="/news/detail/002">新闻2</router-link>
<router-view></router-view>
</li>
</ul>
</div>
</template>
<template id="login">
<div>登录</div>
</template>
<template id="reg">
<div>注册</div>
</template>
<template id="newsDetail">
<div>
<div>新闻详情页</div>
<div>{{msg}}</div>
<div>{{$route.params.id}}</div>
</div>
</template>
<script>
//1.定义路由组件
const Home={template:'#home'}
const News={template:'#news'}
const Login={template:'#login'}
const Reg={template:'#reg'}
const NewsDetail={template:'#newsDetail',
data(){
return {
msg:"helloworld"
}
},
created(){
//得到路由参数
console.log(this.$route.params.id);
//发送ajax,得到返回结果,更新data,页面变化
}
};
//2.定义路由和组件的映射关系
const routes=[
{
path:'/',
redirect:'/home'
},
{path:'/home',component:Home,
children:[
{path:'/home',redirect:'/home/login'},
{path:'/home/login',component:Login},
{path:'/home/reg',component:Reg}
]},
{path:'/news',component:News,
children:[
{path:'/news/detail/:id',component:NewsDetail}
]}
]
//3.定义路由实例
const router = new VueRouter({
routes
})
//4.把路由实例挂载在vue实例中
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</body>
</html>
编程式路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="fn1">跳转到首页</button>
<button type="button" @click="fn2" >跳转到新闻</button>
<button type="button" @click="fn3" >跳转到用户</button>
<button type="button" @click="fn4" >前进一页</button>
<button type="button" @click="fn5" >前进一页</button>
<button type="button" @click="fn6" >后退一页</button>
<button type="button" @click="fn7" >后退一页</button>
<!-- 路由出口 -->
<router-view></router-view>
</div>
<script>
//定义router实例
const router=new VueRouter({
routes:[
{
path:"/index/:id",
name:"index",
component:{template:'<div>首页 {{$route.params.id}}</div>'}
},
{
path:"/news/:id",
name:"news",
component:{template:'<div>新闻 {{$route.params.id}}</div>'}
},
{
path:"/user",
name:"user",
component:{template:'<div>用户 {{$route.query.id}}</div>'}
}]
});
//定义vue实例,把router挂载在vue实力上
let vm=new Vue({
el:"#app",
data:{
},methods:{
fn1(){
this.$router.replace({name:'index',params:{id:Math.random()}})
},
fn2(){
this.$router.push(`/news/${Math.random()}`)
},
fn3(){
this.$router.push({path:'/user',query:{id:Math.random()}})
},
fn4(){
this.$router.go(1);
},
fn5(){
this.$router.forward();
},
fn6(){
this.$router.go(-1);
},
fn7(){
this.$router.back();
}
},
router
})
</script>
</body>
</html>
网友评论