Vue中的路由使用
2018-10-16 本文已影响0人
追逐_chase
Vue.jpeg
基本使用
- 引包
- 创建路由对象
- 创建模板对象
- 4.Vue实例对象，和路由对象关联
// 1.引包
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
// html
<div id="app">
<!-- 在前面加#，是为了哈希跳转，不加#是跳转到一个真实的界面 -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 路由入口 -->
<!-- 路由匹配的组件将在这里渲染 -->
<router-view></router-view>
</div>
//JS文件
<script>
//3.创建组件模板对象
var login = {
template:"<h1>登录--组件模板对象</h1>"
}
var register = {
template:"<h1>注册---这是一个注册模板对象</h1>"
}
//2.创建一个路由对象，当导入路由包之后，在Windows全局对象中，就有一个路由的构造函数
//在创建路由对象的时候，可以为构造函数，传递一个配置对象
var routerObj = new VueRouter({
//这个配置对象中的route表示【路由匹配规则】
// route
//路由匹配规则
routes: [
//每个路由规则，都是一个对象，这个规则对象身上有2个必须的属性
//1.path表示监听哪一个路由链接地址
//2.component，表示，如果路由是前面匹配到的path，则展示component属性对应的组件
//注意：component的属性值，必须是一个组件模板对象
{path:"/login",component:login},
{path:"/register",component:register}
]
})
//创建Vue实例对象
new Vue({
el:"#app",
data:{
},
methods:{
},
//4.关联路由对象
//将路由规则对象，注册到vue实例上，用来监听url地址变化，然后展示对应对象
router:routerObj
})
</script>
redirect 重定向
- 注意：
redirect的重定向和Node中的redirect重定向是2回事，这个里面是利用哈希值 - 用上面的例子，我们可以在 创建
路由对象哪里添加一个匹配规则
//创建路由对象
var routerObj = new VueRouter({
//定义匹配规则
routes: [
//根路径
// {path:"/",component:login},
//这里的redirect和Node中的redirect完全是2回事
//这个里面的重定向是 利用 哈希值
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
})
自定义高亮方式
- 我们可以通过创建路由对象时 给这个
linkActiveClass属性 绑定自己定义的一个类名
//创建路由对象
var routerObj = new VueRouter({
//匹配规则
routes: [
//重定向
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
],
linkActiveClass:"myActive"
})
query属性获取URL的传递参数
- 更改一下 上面例子的参数
<!-- 使用tag属性 更改标签 -->
<!--如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则 path属性-->
<router-link to="/login?id=10">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
//创建模板对象
var login = {
template:"<h1>登录模板对象{{ -- $route. query.id}}</h1>",
created:function () {
console.log(this.$route);
}
}
var register = {
template:"<h1>注册模板对象</h1>"
}
var routerObj = new VueRouter({
//匹配规则
routes: [
//重定向
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
})
new Vue({
el:"#app",
data:{},
methods:{},
router:routerObj
})
- $route 对象
image.png
<!-- 使用tag属性 更改标签 -->
<!--如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则 path属性-->
<router-link to="/login/10/cc">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
<script>
//创建模板对象
var login = {
template:"<h1>登录模板对象</h1>",
created:function () {
console.log(this.$route);
}
}
var register = {
template:"<h1>注册模板对象</h1>"
}
var routerObj = new VueRouter({
//匹配规则
routes: [
//重定向
{path:"/",redirect:"/login"},
// :是 占位符
{path:"/login/:id/:name",component:login},
{path:"/register",component:register}
]
})
new Vue({
el:"#app",
data:{},
methods:{},
router:routerObj
})
</script>
image.png
路由的嵌套
<dv id="app">
<router-link to="/account">account账户</router-link>
<router-view></router-view>
</dv>
<template id="templ">
<div>
<h1>嵌套组件</h1>
<!-- 使用tag属性 更改标签 -->
<!--如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则 path属性-->
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
//创建模板对象
var account = {
template:"#templ"
}
var login = {
template:"<h1>登录模板对象</h1>",
created:function () {
console.log(this.$route);
}
}
var register = {
template:"<h1>注册模板对象</h1>"
}
var routerObj = new VueRouter({
//匹配规则
routes: [
{
path:"/account",
component:account,
//使用children属性，实现自路由，同时，子路由的path前面，不要带/，否则永远以根路径开始请求
//这样不方便 用户理解URL地址
children:[
{path:"login",component:login},
{path:"register",component:register}
]
},
// :是 占位符
// {path:"/account/login",component:login},
// {path:"/account/register",component:register}
]
})
new Vue({
el:"#app",
data:{},
methods:{},
router:routerObj
})
</script>
命名视图
- 给
router-view添加一个name属性名称
<style>
*{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.nav_h{
width: 100%;
height: 60px;
background: #0CBAFF;
text-align: center;
line-height: 60px;
}
.contenter {
display: flex;
}
.content_r{
width: 20%;
height: 100%;
background: #2AB561;
}
.content_l {
width: 80%;
height: 100%;
background: pink;
}
</style>
<div id="app">
<!--占位节点-->
<router-view></router-view>
<div class="contenter">
<!--添加一个名称 命名视图-->
<router-view name="right"></router-view>
<router-view name="left"></router-view>
</div>
</div>
<script>
//模板对象
var nav_header = {
template:"<div class='nav_h'>这是头部</div>"
}
var content_right = {
template:"<div class='content_r'>这是右边栏</div>"
}
var content_left = {
template:"<div class='content_l'>这是主题 内容</div>"
}
//创建路由对象
var routerObj = new VueRouter({
routes:[
{
//
path:"/",components:{
default:nav_header,
right:content_right,
left:content_left
}
}
]
})
new Vue({
el:"#app",
data:{},
methods:{},
router:routerObj
})
</script>
喜欢文章的👍一下，谢谢，有想学习[web]可以私聊我。
image.png
