标签：script 跳转 class children ansi ons temp 接收 new
前端路由:
前端路由主要是使用Hash （....#/login）进行路由切换的，不会刷新页面，类似于页面中的锚链接，只是在单页面中进行切换，并不会向后端发送请求。
后端路由：
后端路由主要是没有路由都会向后端发送请求,都会刷新页面
1.组件的路由切换
<div id="app"> <!-- 使用router-link 代替原本的a链接 tag表示最终渲染成的标签 同时具备了点击切换组件的功能 --> <router-link to="/login" tag="span">登录</router-link> <router-link to="/register" tag="a">注册</router-link> <!-- 切换的组件的占位符 ，显示切换到的组件--> <router-view></router-view> </div> <template id="login"> <h3>登录</h3> </template> <template id="register"> <h3>注册</h3> </template> <script> var login = { template:"#login", } var register = { template:"#register" } const router = new VueRouter({ routes:[
] }) new Vue({ el:"#app", data:{ }, components:{ login,register }, // 将路由和Vue实例实现绑定。 router:router,//也可直接 router, })
2.路由嵌套
<div id="app">
<h3>主页</h3>
<router-link to="/main">main页面</router-link>
//maink组件的占位
<router-view></router-view>
</div>
<template id="maink">
<div>
<h3>main</h3>
<router-link to="/main/login" >登录</router-link>
<router-link to="/main/register">注册</router-link>
<transition name="my" mode="out-in">
// 登录或是注册组件的占位
<router-view></router-view>
</transition>
</div>
</template>
<template id="login">
<h3>登录</h3>
</template>
<template id="register">
<h3>注册</h3>
</template>
<script>
var maink = { //template的id值不能和DOM的标签一样
template:"#maink",
}
var login = {
template:"#login",
}
var register = {
template:"#register"
}
const router = new VueRouter({
routes:[
{
path:"/main",
component:maink,
children:[//子路由
{
path:"login",//注意不是从根目录开始的 不加斜杠
component:login,
},{
path:"register",
component:register
}
]
},
]
})
new Vue({
el:"#app",
data:{
},
components:{
login,register,
maink
},
// 将路由和Vue实例实现绑定。
router:router,//也可直接 router,
})
3.路由传值
<div id="app">
<router-link to="/login?id=99&name=zzzz">登录</router-link>
<router-link to="/register/444">注册</router-link>
<router-view></router-view>
</div>
<template id="login">
<div>
// 当直接在链接中使用?来进行Key value的拼接的时候，在组件中通过 $route.query 来接收要查询的数据 无需修改路由验证规则
<h3>登录=------{{this.$route.query.name}}</h3>
</div>
</template>
<template id="register">
<div>
// 当在连接中使用 /register/444 这样的路由的时候，并且需要修改router中的路由规则/register/:id，使用$route.params来获取数据
<h3>注册------{{this.$route.params.id}}</h3>
</div>
</template>
<script>
var login = {
template:"#login",
}
var register = {
template:"#register",
}
const router = new VueRouter({
routes:[
{ path:"/login", component:login },
{ path:"/register/:id", component:register },
]，
}) new Vue({ el:"#app", data:{ }, components:{ login,register }, // 将路由和Vue实例实现绑定。 router:router,//也可直接 router, }) </script>
4.命名视图
<div id="app">
<router-view></router-view>
<!-- 名字和components中的一样 -->
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<template id="top">
<div>
<h3>top</h3>
</div>
</template>
<template id="left">
<div>
<h3>left</h3>
</div>
</template>
<template id="right">
<div>
<h3>right</h3>
</div>
</template>
<script>
var top1 = { //top 也不可以作为组件对象名
template:"#top",
}
var left = {
template:"#left",
}
var right = {
template:"#right"
}
const router = new VueRouter({
routes:[
{
path:"/",
components:{ //是个components对象
default: top1,
left:left,
right:right,
}
},
],
})
new Vue({
el:"#app",
data:{
},
components:{
top,left,right
},
// 将路由和Vue实例实现绑定。
router:router,//也可直接 router,
})
</script>
标签：script 跳转 class children ansi ons temp 接收 new
原文地址：https://www.cnblogs.com/panjingshuang/p/11968835.html
