logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

vue路由学习

 悦光阴 2021-09-03

一.文章导读

​路由的本质就是一种对应关系，在代码程序中，一个a标签跳转页面，里面a标签里面需要写对用页面的路径，或者写跳转后台的服务。那么这个路径就与页面相对应，我们可以将它视为路由的一种形式。

路由分为前端路由和后端路由

  • 后端路由是由服务器端进行实现，并完成资源的分发
  • 前端路由是依靠hash值(锚链接)的变化进行实现

下面学习vue的路由管理器：Vue Router

二.路由入门实例

1. 选项卡案例

<body>
<div id="app">
<!-- 定义table选项卡头 #号代表锚点必须 -->
<a href="#/tab1">tab1</a>
<a href="#/tab2">tab2</a>
<a href="#/tab3">tab3</a>
<a href="#/tab4">tab4</a>
<!-- 定义内容 -->
<div class="tablebody">
<!-- 根据 tablename的值变换而变换显示组件 -->
<component :is="tablename"></component>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 
定义四个组件模板,与a标签一一对应
 */
const tab1 = {
template: '<strong>table01</strong>'
}
const tab2 = {
template: '<strong>table02</strong>'
}
const tab3 = {
template: '<strong>table03</strong>'
}
const tab4 = {
template: '<strong>table04</strong>'
}

const vm = new Vue({
el: "#app",
data: {
tablename: "tab1"
},
// 注册 私有组件
components: {
tab1,
tab2,
tab3,
tab4
}
});
//window.onhashchange  获取最新的hash值并将hash值截取将该值赋值给实例的 tablename
window.onhashchange = function() {
// location.hash 获取当前最新的hash值
console.log(location.hash);
// 截取hash值赋值给 tablename 
vm.tablename = location.hash.slice(2);
/* switch(location.hash.slice(1)){
            case '/tab1':
                vm.tablename = 'tab1'
            break
            case '/tab2':
                vm.tablename = 'tab2'
            break
            case '/tab3':
                vm.tablename = 'tab3'
            break
            case '/tab4':
                vm.tablename = 'tab4'
            break
            } */
}
</script>
<!-- // 加点样式 -->
<style type="text/css">
#app {
width: 500px;
height: 300px;
border: 1px solid black;
}

#app a {
display: inline-block;
width: 100px;
padding: 10px;
}

.tablebody {
margin-top: 20px;
text-align: center;
background-color: aliceblue;
height: 240px;
}
</style>
</body>

三.Vue Router使用

1.Router简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性：
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

2.Vue Router使用

<html>
<head>
<meta charset="utf-8">
<title>vueRouter使用</title>
<!-- // 第一步导入vue-router_3.0.2.js vue-router依赖于vue.js 在后面导入 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 第二步 将上面的代码copy一下-->
<div id="app">
<!--
将原先的a标签修改为 <router-link> 标签 
router-link相当于a标签中的a to相当于href
-->
<router-link to="/tab1">tab1</router-link>
<router-link to="/tab2">tab2</router-link>
<router-link to="/tab3">tab3</router-link>
<router-link to="/tab4">tab4</router-link>
<!-- 定义内容 -->
<div class="tablebody">
<!-- 3. 添加路由占位符,存放组件 -->
<router-view></router-view>
<!-- <component :is="tablename"></component> -->
</div>
</div>
</div>
<script type="text/javascript">
/*
定义四个组件模板,与a标签一一对应
 */
const tab1 = {
template: '<strong>table01</strong>'
}
const tab2 = {
template: '<strong>table02</strong>'
}
const tab3 = {
template: '<strong>table03</strong>'
}
const tab4 = {
template: '<strong>table04</strong>'
}
/* 
创建路由 并绑定定义的组件模板
 */
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        
{path:"/tab1",component:tab1},
        {path:"/tab2",component:tab2},
{path:"/tab3",component:tab3},
{path:"/tab4",component:tab4},
    ]
});
new Vue({
el:"#app",
// 在实例中挂载路由对象
    router:myRouter
})

</script>
<style type="text/css">
#app {
width: 500px;
height: 300px;
border: 1px solid black;
}

#app router-link {
width: 100px;
padding: 10px;
}

.tablebody {
margin-top: 20px;
text-align: center;
background-color: aliceblue;
height: 240px;
}
</style>
</body>
</html>

注意:导入的vue-router_3.0.2.js 依赖于vue.js,且必须在创建路由之前导入

3.嵌套路由

​在前面组件学习中，我们间接的了解到了父组件和子组件的概念，那么在一个路由实例中存在这另一个子路由，我们将他们称之为嵌套路由

<html>
<head>
<meta charset="utf-8">
<title>嵌套路由</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/user">user</router-link>
<router-link to="/login">login</router-link>

<router-view></router-view>
</div>
<script type="text/javascript">
// 创建 user 模板
const User = {
template: `
<div>
this is user
</div>
`
};
// 定义login 父模板模板 login模板中写了定义了两个子路由
const Login = {
template: `
<div>
<h1>this is Login</h1>
<hr>
<router-link to="/login/pwd">账号密码登录</router-link>
<router-link to="/login/phone">扫码登录</router-link>
<router-view></router-view>
</div>
`
};
// 定义账号登录子路由组件
const account = {
template: `
<div>
账号：<input type="text"><br>
密码：<input type="text">
</div>
`
}
// 定义扫码子路由组件
const phone = {
template: `
<div>
<img src = "img/2.jpg" width = "50px">
</div>
`
}
// 创建路由对象
const myRouter = new VueRouter({
routes: [{
path: "/",
redirect: "/user"
},
{
path: "/user",
component: User
},
{
path: "/login",
component: Login,
// 定义子路由
children: [{
path: "/login/pwd",
component: account
},
{
path: "/login/phone",
component: phone
},
]
},
]
})

new Vue({
el: "#app",
// 挂载路由
router: myRouter
})
</script>
</body>
</html>

4.动态路由

<body>
<div id="app">
<!-- 定义四个 router-link 标签 -->
<router-link to="/user/1">点击1</router-link>
<router-link to="/user/2">点击2</router-link>
<router-link to="/user/3">点击3</router-link>
<router-link to="/user/4">点击4</router-link>
<router-view></router-view>
</div>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
template: "<div>用户:{{$route.params.id}}</div>"
}
// 创建路由对象
const myRouter = new VueRouter({
routes: [
// {path:"/",redirect:"/user"},
{
// 在路径上带一个id相当于带一个值达到动态路由的效果
path: "/user/:id",
component: User
}
]
});
new Vue({
el: "#app",
router: myRouter
})
</script>
</body>

​ 上面的代码我们直接使用 $route.params.id 获取路由中传的参数值，除此之外，我们还可以通过props传值

<body>
<div id="app">
<!-- 定义四个 router-link 标签 -->
<router-link to="/user/1">点击1</router-link>
<router-link to="/user/2">点击2</router-link>
<router-link to="/user/3">点击3</router-link>
<router-link to="/user/4">点击4</router-link>
<router-view></router-view>
</div>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 上面的代码我们直接使用 $route.params.id 获取路由传的值，除此之外，我们还可以通过props传值

var User = {
props: ["id"],
// 使用props传值，在页面中使用{{}}就可以
template: "<div>用户：{{id}}</div>"
}
// 创建路由实例 制定路由规则
var myRouter = new VueRouter({
routes:[
// props:true 启用 props
{path:"/user/:id",component:User,props:true}
]
})
new Vue({
el: "#app",
data:{
id:1
},
//在app实例中挂载路由
router:myRouter
})
</script>
</body>

5.路由别名

<body>
<div id="app">
<!-- 在前台使用v-bind绑定 路由绑定使用别名name:'user' -->
<router-link :to="{ name:'user' , params: {id:111} }">111</router-link>
<router-link :to="{ name:'user' , params: {id:222} }">222</router-link>
<router-link :to="{ name:'user' , params: {id:333} }">333</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 var User = {
 props:["id"],
 template:"<div>用户: {{id}}</div>"
 }
 
 var myRouter = new VueRouter({
routes:[
{
// name 为取的别名
path:"/user/:id",component:User,name:"user",props:true
}
] 
});
new Vue({
el:"#app",
// 路由挂载
router:myRouter
})
</script>
</body>

6.编程式导航

页面导航的两种方式：

  • 声明式导航：通过点击链接的方式实现的导航
  • 编程式导航：调用js的api方法实现导航
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );

dmeo演示

<body>
<div id="app">
<router-link :to="{ name:'user' , params: {id:1} }">user1</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 var User = {
props:["id"],
template: `
   <div>用户:{{id}}<br>
<span @click="test01">编程试导航测试1</span>
<span @click="test02">编程试导航测试2</span>
   </div>
`,
methods:{
// 采用js编程式导航
test01:function(){
this.$router.push("/test01");
},
test02:function(){
this.$router.push("/test02");
}
}

}
// 
var Test01 = {
template:`
<span>测试01</span>
`
}
var Test02 = {
template:`
<span>测试02</span>
`
}

// 创建路由 并制定规则
var myRouter =  new VueRouter({
routes:[
{
path:"/user",component:User,name:'user',props:true
},
{
path:"/test01",component:Test01,name:'test01',props:true
},
{
path:"/test02",component:Test02,name:'test02',props:true
}
]
});
new Vue({
el:"#app",
router:myRouter
})
</script>
</body>

gitee地址：https:///li_shang_shan/vue-routing-learning

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 悦光阴 > 《待分类》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多