Vue路由应用

最新推荐文章于 2022-09-25 11:19:41 发布

oye-game

最新推荐文章于 2022-09-25 11:19:41 发布

阅读量142

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/cangqiong_xiamen/article/details/103876454

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1. 前端路由和后端路由的区别

后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源；
前端路由: 对于单应用程序来说,主要通过URL中的hash(#号)来实现不同页面直接的切换,同时hash有一个特点:   HTTP请求中不会包含hash相关的内容；所以,单页面程序中的页面跳转主要用hash实现；

在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)

2. 在Vue中使用vue-router

导入vue-router组件类库:
<script src="./lib/vue-router-2.7.0.js"></script>
使用router-link组件来导航
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

注意: router-link渲染为一个a标签,如果需要渲染成别的如下处理
<router-link to="/login" tag="span">登录</router-link>
使用router-view组件来显示匹配到的组件
<router-view></router-view>
注意: router-view 是vue-router提供的元素,专门用来当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个router-view中去
创建使用Vue.extend创建组件

var  login = Vue.extend({
       template: '<h1>登录组件</h1>'
});
var  register = Vue.extend({
      template:'<h1>注册组件</h1>'
});

创建一个路由router实例,通过routers属性来定义路由匹配规则

var  router = new VueRouter({
       routes:[
        { path: '/', redirect: '/login' },
        {path: '/login', component:login},
        {path: '/register', component: register}
       ]
});

注意: { path: '/', redirect: '/login' }这个表示的是默认显示
每个路由规则都是一个对象,这个规则对象,身上,有两个必须的属性:

  属性1： 是path,表示监听哪个路由链接地址;
  属性2： 是component,表示,如果路由是前面匹配到的path,则展示component属性对应的那个组件
  注意: component的属性值，必须是一个组件的模板对象,不能是组件的引用名称

使用router属性来使用路由规则

var  vm = new Vue({
       el: '#app',
       router: router //使用router属性来使用路由规则
});

案例详细

路由的基本使用

<!DOCTYPE  html>
<html  lang="en">
<head>
         <meta  charset="UTF-8">
         <meta  name="viewport"  content="width=device-width,initial-scale=1.0">
         <meta  http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
         <script src="./lib/vue-2.4.0.js"></script>
         <!-- 1. 安装 vue-router 路由模块 -->
         <script src="./lib/vue-router-3.0.1.js"></script>
         <style>
		    .router-link-active,
		    .myactive {
		      color: red;
		      font-weight: 800;
		      font-style: italic;
	 	     font-size: 80px;
		      text-decoration: underline;
		      background-color: green;
		    }

	    .v-enter,
	    .v-leave-to {
		      opacity: 0;
		      transform: translateX(140px);
	    }

	 	   .v-enter-active,
		    .v-leave-active {
	      transition: all 0.5s ease;
	    }
  </style>
</head>
<body>
          <div  id="app">
                 <!--router-link 默认渲染为一个a标签-->
                 <router-link  to="/login"   tag="span">登录</router-link>
                 <router-link  to="/register">注册</router-link>

                    <!-- 这是vue-router提供的元素,专门用来当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个router-view中去 --->
                    <!--所以: 我们可以把router-view认为是一个占位符-->
                    <transition  mode="out-in">
                               <router-view></router-view>
                    </transition>
          </div>
          <script>
              //组件的模板对象
              var  login = {
                    template: '<h1>登录组件</h1>'
              }
              var  register = {
                   template:'<h1>注册组件</h1>'
              }
              //2. 创建一个路由对象,当导入vue-router包之后,在window全局对象中.就有了一个路由的构造函数,叫做VueRouter
              //   在new路由对象的时候,可以为构造函数,传递一个配置对象
              var   routerObj = new VueRouter({
                   // route 这个配置对象的route表示【路由配置规则】的意思
                   routes:[
                       //每个路由规则,都是一个对象,这个规则对象,身上,有两个必须的属性
                       // 属性1是path,表示监听哪个路由链接地址
                       // 属性2是component,表示,如果路由是前面匹配到的path,则展示component属性对应的那个组件
                       {path:'/', redirect: '/login'},//这里的redirect和Node中的redirect完全是两码事
                       {path:'/login', component:login},
                       {path:'/register', component:register}
                   ],
                   linkActiveClass:'myactive'
              })
           
              //创建Vue实例,得到ViewModel
              //将路由规则对象,注册到vm实例上,用来监听URL地址的变化,然后展示对应的组件
              var  vm = new Vue({
                    el:'#app',
                    data:{},
                    methods:{},
                    router:routerObj
              });
          </script>
</body>

oye-game

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue路由应用

1. 前端路由和后端路由的区别后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源；前端路由: 对于单应用程序来说,主要通过URL中的hash(#号)来实现不同页面直接的切换,同时hash有一个特点: HTTP请求中不会包含hash相关的内容；所以,单页面程序中的页面跳转主要用hash实现；在单页面应用程序中,这种通过hash改变来切换页面的...
复制链接

扫一扫