05-Vue提高之前端路由

最新推荐文章于 2024-05-26 16:19:47 发布
最新推荐文章于 2024-05-26 16:19:47 发布
阅读量241 收藏
点赞数
分类专栏： 前端相关技术 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583303/article/details/118340642
版权

文章目录

01.路由的基本概念与原理（了解）

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源，那么url地址和真实的资源之间就有一种对应的关系，就是路由。

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

1.1.后端路由：后端渲染

  • 概念：根据不同的用户 URL 请求，返回不同的内容
  • 本质： URL 请求地址与服务器资源之间的对应关系

1.2.SPA（ Single Page Application）

  • 后端渲染（存在性能问题）
  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
  • SPA（ Single Page Application） 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。
  • SPA实现原理之一：基于URL地址的hash（ hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
  • 在实现SPA过程中，最核心的技术点就是前端路由

1.3.前端路由

  • 概念：根据不同的用户事件， 显示不同的页面内容

  • 本质： 用户事件与事件处理函数之间的对应关系

  • 前端路由主要做的事情就是监听事件并分发执行事件处理函数

1.4.实现简易的前端路由

  • 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
  • 核心实现依靠一个事件，即监听hash值变化的事件
window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}
  • 简易的前端路由实现tab栏切换
<!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>简易的前端路由实现tab栏切换</title>
    <!-- 导入 vue 文件 -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
      <!-- 切换组件的超链接 -->
      <a href="#/zhuye">主页</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>

      <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
      <!-- 可以把 component 标签当做是【组件的占位符】 -->
      <component :is="comName"></component>
    </div>

    <script>
      /*定义需要被切换的 4 个组件*/
      //主页组件
      const zhuye = {
        template: '<h1>主页信息</h1>'
      }

      // 科技组件
      const keji = {
        template: '<h1>科技信息</h1>'
      }

      // 财经组件
      const caijing = {
        template: '<h1>财经信息</h1>'
      }

      // 娱乐组件
      const yule = {
        template: '<h1>娱乐信息</h1>'
      }
     
     /*Vue实例对象*/
      const vm = new Vue({
        el: '#app',
        data: {
          comName: 'zhuye'
        },
        // 注册私有组件
        components: {
          zhuye,
          keji,
          caijing,
          yule
        }
      })
      
      // 监听window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
      window.onhashchange = function() {
        // 通过 location.hash 获取到最新的 hash 值
        console.log(location.hash);
        switch(location.hash.slice(1)){
          case '/zhuye':
            vm.comName = 'zhuye'
          break
          case '/keji':
            vm.comName = 'keji'
          break
          case '/caijing':
            vm.comName = 'caijing'
          break
          case '/yule':
            vm.comName = 'yule'
          break
        }
      }
    </script>
  </body>
</html>

思路分析：

  • 在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容，在页面中有四个超链接，如下：
<a href="#/zhuye">主页</a> 
<a href="#/keji">科技</a> 
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
  • 当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件，在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示：
window.onhashchange = function() {
    // 通过 location.hash 获取到最新的 hash 值
    console.log(location.hash);
    switch(location.hash.slice(1)){
        case '/zhuye':
        //通过更改数据comName来指定显示的组件
        //因为 <component :is="comName"></component> ，组件已经绑定了comName
        vm.comName = 'zhuye'
        break
        case '/keji':
        vm.comName = 'keji'
        break
        case '/caijing':
        vm.comName = 'caijing'
        break
        case '/yule':
        vm.comName = 'yule'
        break
    }
}

02.Vue Router基本使用（重要）

2.1.Vue Router简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。

Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性：

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

2.2.Vue Router的使用步骤

第一步：导入js文件

  • Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

第二步：添加路由链接

<!--<router-link>是路由中提供的标签，默认会被渲染为a标签-->
<!--to属性默认被渲染为href属性-->
<!--to属性的值会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

第三步：添加路由填充位（路由占位符）

<router-view></router-view>

第四步：定义路由组件

var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

第五步：配置路由规则并创建路由实例

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

第六步：将路由挂载到Vue实例中

new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

小结：

Vue Router的使用步骤还是比较清晰的，按照步骤一步一步就能完成路由操作
A.导入js文件
B.添加路由链接
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
D.定义路由组件
E.配置路由规则并创建路由实例
F.将路由挂载到Vue实例中

<!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>
    
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <!---->
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
    	<!--第二步：添加路由链接-->
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

     <!-- 第三步：添加路由填充位（路由占位符）-->
      <router-view></router-view>
    </div>

    <script>
    	/*第四步：定义路由组件*/
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      /*第五步：配置路由规则并创建路由实例*/
      const myrouter = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        el: '#app',
        data: {},
        /*第六步：将路由挂载到Vue实例中*/
        router: myrouter
      })
    </script>
  </body>
</html>

补充：

  • 路由重定向：可以通过路由重定向为页面设置默认展示的组件，也就是用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的页面组件。
  • 在路由规则中添加一条路由规则即可，如下：
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path：表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
		//当访问/地址，强制跳转到/user地址
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

03.Vue Router嵌套路由(重要)

3.1.嵌套路由的概念

当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

嵌套路由最关键的代码在于理解子级路由的概念：

比如我们有一个/login的路由
那么/login下面还可以添加子级路由，如:
/login/account
/login/phone

参考代码如下：

<!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>
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
    	<!--第二步：添加路由链接-->
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 第三步：添加路由填充位（路由占位符）-->
      <router-view></router-view>
    </div>

    <script>
    	/*第四步：定义路由组件*/
    	//不带嵌套的路由组件
      const User = {
        template: '<h1>User 组件</h1>'
      }
      //带嵌套的路由组件
      //Register路由组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>
          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>
          <!-- 子路由组件将会在router-view中显示 -->
        	<router-view></router-view>
        <div>`
      }
      
      //定义两个子级路由组件
      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }
      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }
      
       /*第五步：配置路由规则并创建路由实例*/
      // 创建路由实例对象
      const myrouter = new VueRouter({
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        /*第六步：将路由挂载到Vue实例中*/
       router: myrouter
      })
    </script>
  </body>
</html>

04.VueRouter动态路由匹配(重要)

  • 动态路由使用场景：多个路径中有一部分是相同的

4.1.动态路由匹配的基本用法：$route.params

  • 思考：有如下3个路由链接 ，该如何定义路由规则
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
  • 定义成如下三个对应规则可以吗？
可以这样定义，但是不好，多了就会很麻烦
{ path: '/user/1', component: User }
{ path: '/user/2', component: User }
{ path: '/user/3', component: User }
  • 通过动态路由参数的模式进行路由匹配
var myRouter = new VueRouter({
    routes: [
        //动态路径参数，以冒号开头
        { path: "/user/:id", component: User }
        ]
     })
  • 路由组件中通过$route.params获取路由参数
var User = { template:"<div>用户：{{$route.params.id}}</div>"

参考代码如下：

<!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>
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
    	<!--第二步：添加路由链接-->
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

     <!-- 第三步：添加路由填充位（路由占位符）-->
      <router-view></router-view>
    </div>

    <script>
    	/*第四步：定义路由组件*/
      const User = {
        template: '<h1>User 组件  用户id为: {{$route.params.id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

     /*第五步：配置路由规则并创建路由实例*/
      const myrouter = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        /*第六步：将路由挂载到Vue实例中*/
        router: myrouter
      })
    </script>
  </body>
</html>

4.2.动态路由匹配的补充用法一：props[“id”]

  • 如果使用$route.params.id来获取路径传参的数据不够灵活，我们可以通过props参数形式来接收参数
/*第四步：定义路由组件*/
var User = { 
	  /*使用props获取path中的id*/
      props:["id"],
      template:"<div>用户：{{id}}</div>"
      }
      
/*第五步：配置路由规则并创建路由实例*/
var myRouter = new VueRouter({
    routes: [
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:id", component: User,props:true },
        ]
})

4.3.动态路由匹配的补充用法二：props: [‘id’, ‘uname’, ‘age’]

  • 还有一种情况，我们可以将props设置为对象形式，那么就直接将对象的数据传递给组件进行使用。
<!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>
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
    	<!--第二步：添加路由链接-->
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

     <!-- 第三步：添加路由填充位（路由占位符）-->
      <router-view></router-view>
    </div>

    <script>
    	/*第四步：定义路由组件*/
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      /*第五步：配置路由规则并创建路由实例*/
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        /*第六步：将路由挂载到Vue实例中*/
        router: myrouter
      })
    </script>
  </body>
</html>

4.4.动态路由匹配的补充用法三：props: [‘id’, ‘uname’, ‘age’]

  • 如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式
<!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>
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
    	<!--第二步：添加路由链接-->
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

     <!-- 第三步：添加路由填充位（路由占位符）-->
      <router-view></router-view>
    </div>

    <script>
    	/*第四步：定义路由组件*/
    	const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

     /*第五步：配置路由规则并创建路由实例*/
      const myrouter = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        /*第六步：将路由挂载到Vue实例中*/
        router: myrouter
      })
    </script>
  </body>
</html>

05.VueRouter 命名路由

5.1.命名路由的配置规则

  • 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为命名路由
const router = new VueRouter({
    routes: [
   	 {
    	// 命名路由
    	name: 'user',
    	path: '/user/:id',
   		component: User,
		props: route => ({ uname: 'zs', age: 20, id: route.params.id })
     }
    ]
  })
  • name为指定的别名，通过这个别名找到对应的路径，params为传递的id值
 <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
  • 参考案例
<!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>
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
    	<!--第二步：添加路由链接-->
    	<!--不使用别名-->
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      
      <!--使用别名：注意to前面是冒号,进行参数绑定-->
      <router-link :to="{name: 'user',params:{id: 1}}">User1</router-link>
      <router-link :to="{name: 'user',params:{id: 2}}">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      
      <!-- 第三步：添加路由填充位（路由占位符）-->
      <router-view></router-view>
    </div>

    <script>
    	/*第四步：定义路由组件*/
    	const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

     /*第五步：配置路由规则并创建路由实例*/
      const myrouter = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            name:'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          }
        ]
      })
      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        /*第六步：将路由挂载到Vue实例中*/
        router: myrouter
      })
    </script>
  </body>
</html>

06.VueRouter 编程式导航(重点:类似路由转发)

6.1.页面导航的两种方式

  • 声明式导航：通过点击链接的方式实现的导航
例如：
	普通网页中的<a></a>链接
	Vue中的<route-link></route-link>
  • 编程式导航：调用js的api方法实现导航
例如：
	普通网页中的location.href
  • Vue-Router中常见的导航方式
this.$router.push("hash地址");
this.$router.push("/login");

this.$router.push({ name:'user' , params: {id:3} });
this.$router.push({ path:"/login"});
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );
  • 案例
<!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>
    <!-- 第一步：导入js文件：先导入 vue文件， 再导入vue-router文件 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')
          }
        },
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)
          }
        }
      }

      // 创建路由实例对象
      const myrouter = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        router: myrouter
      })
    </script>
  </body>
</html>

07.实现后台管理案例(了解)

点击左侧的"用户管理",“权限管理”,“商品管理”,“订单管理”,"系统设置"都会出现对应的组件并展示内容

其中"用户管理"组件展示的效果如上图所示，在用户管理区域中的详情链接也是可以点击的，点击之后将会显示用户详情信息。

7.1.引入基本素材

  • 先将素材文件夹中的11.基于vue-router的案例.html复制到我们自己的文件夹中，看一下这个文件中的代码编写了一些什么内容，这个页面已经把后台管理页面的基本布局实现了。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>基于vue-router的案例</title>
    <style type="text/css">
      html,
      body,
      #app {
        margin: 0;
        padding: 0px;
        height: 100%;
      }
      .header {
        height: 50px;
        background-color: #545c64;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        color: #fff;
      }
      .footer {
        height: 40px;
        line-height: 40px;
        background-color: #888;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .main {
        display: flex;
        position: absolute;
        top: 50px;
        bottom: 40px;
        width: 100%;
      }
      .content {
        flex: 1;
        text-align: center;
        height: 100%;
      }
      .left {
        flex: 0 0 20%;
        background-color: #545c64;
      }
      .left a {
        color: white;
        text-decoration: none;
      }
      .right {
        margin: 5px;
      }
      .btns {
        width: 100%;
        height: 35px;
        line-height: 35px;
        background-color: #f5f5f5;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
      }
      button {
        height: 30px;
        background-color: #ecf5ff;
        border: 1px solid lightskyblue;
        font-size: 12px;
        padding: 0 20px;
      }
      .main-content {
        margin-top: 10px;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul li {
        height: 45px;
        line-height: 45px;
        background-color: #a0a0a0;
        color: #fff;
        cursor: pointer;
        border-bottom: 1px solid #fff;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      td,
      th {
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 12px;
      }

      th {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <div>
      <!-- 头部区域 -->
      <header class="header">后台管理系统</header>
      <!-- 中间主体区域 -->
      <div class="main">
        <!-- 左侧菜单栏 -->
        <div class="content left">
          <ul>
            <li>用户管理</li>
            <li>权限管理</li>
            <li>商品管理</li>
            <li>订单管理</li>
            <li>系统设置</li>
          </ul>
        </div>
        <!-- 右侧内容区域 -->
        <div class="content right"><div class="main-content">添加用户表单</div></div>
      </div>
      <!-- 尾部区域 -->
      <footer class="footer">版权信息</footer>
    </div>
  </body>
</html>

7.2.在页面中引入vue，vue-router

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

7.3.创建Vue实例对象，准备开始编写代码实现功能

const vm = new Vue({
        el: '#app',
        router
      })

7.4.定义根组件

  • 希望是通过组件的形式展示页面的主体内容，而不是写死页面结构，所以我们可以定义一个根组件：
//只需要把原本页面中的html代码设置为组件中的模板内容即可
const app = {
    template:`<div>
        <!-- 头部区域 -->
        <header class="header">传智后台管理系统</header>
        <!-- 中间主体区域 -->
        <div class="main">
          <!-- 左侧菜单栏 -->
          <div class="content left">
            <ul>
              <li>用户管理</li>
              <li>权限管理</li>
              <li>商品管理</li>
              <li>订单管理</li>
              <li>系统设置</li>
            </ul>
          </div>
          <!-- 右侧内容区域 -->
          <div class="content right">
            <div class="main-content">添加用户表单</div>
          </div>
        </div>
        <!-- 尾部区域 -->
        <footer class="footer">版权信息</footer>
      </div>`
  }

7.5.创建路由对象

  • 当我们访问页面的时候，默认需要展示刚刚创建的app根组件，我们可以创建一个路由对象来完成这个事情,然后将路由挂载到Vue实例对象中即可
const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

7.6.设置路由占位符

  • 补充：到此为止，基本的js代码都处理完毕了，我们还需要设置一个路由占位符
<body>
  <div id="app">
    <router-view></router-view>
  </div>
</body>

7.7.设置嵌套路由

  • 此时我们打开页面应该就可以得到一个VueRouter路由出来的根组件了
  • 我们需要在这个根组件中继续路由实现其他的功能子组件
  • 先让我们更改根组件中的模板：更改左侧li为子级路由链接，并在右侧内容区域添加子级组件占位符
const app = {
    template:`<div>
        ........
        <div class="main">
          <!-- 左侧菜单栏 -->
          <div class="content left">
            <ul>
              <!-- 注意：我们把所有li都修改为子路由链接 -->
              <li><router-link to="/users">用户管理</router-link></li>
              <li><router-link to="/accesses">权限管理</router-link></li>
              <li><router-link to="/goods">商品管理</router-link></li>
              <li><router-link to="/orders">订单管理</router-link></li>
              <li><router-link to="/systems">系统设置</router-link></li>
            </ul>
          </div>
          <!-- 右侧内容区域 -->
          <div class="content right">
            <div class="main-content">
                <!-- 在 -->
                <router-view></router-view> 
            </div>
          </div>
        </div>
        .......
      </div>`
  }

7.8.设置嵌套路由的子组件

  • 然后，我们要为子级路由创建并设置需要显示的子级组件
//建议创建的组件首字母大写，和其他内容区分
const Users = {template:`<div>
    <h3>用户管理</h3>
</div>`}
const Access = {template:`<div>
    <h3>权限管理</h3>
</div>`}
const Goods = {template:`<div>
    <h3>商品管理</h3>
</div>`}
const Orders = {template:`<div>
    <h3>订单管理</h3>
</div>`}
const Systems = {template:`<div>
    <h3>系统管理</h3>
</div>`}

//添加子组件的路由规则
const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[
            { path:"/users",component:Users },
            { path:"/accesses",component:Access },
            { path:"/goods",component:Goods },
            { path:"/orders",component:Orders },
            { path:"/systems",component:Systems },
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

7.9.展示用户信息列表

  • 为Users组件添加私有数据,并在模板中循环展示私有数
const Users = {
    data(){
        return {
            userList:[
                {id:1,name:"zs",age:18},
                {id:2,name:"ls",age:19},
                {id:3,name:"wang",age:20},
                {id:4,name:"jack",age:21},
            ]
        }
    },
   template:`<div>
        <h3>用户管理区域</h3>
        <table>
          <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
          </thead>
          <tbody>
            <tr v-for="item in userlist" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>
                <a href="javascript:;" @click="goDetail(item.id)">详情</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>`
      }

7.10.设置详情

  • 当用户列表展示完毕之后，我们可以点击列表中的详情来显示用户详情信息，首先我们需要创建一个组件，用来展示详情信息
const UserInfo = {
    props:["id"],
    template:`<div>
      <h5>用户详情</h5>
      <p>查看 {{id}} 号用户信息</p>
      <button @click="goBack">返回用户详情页</button>
    </div> `,
    methods:{
      goBack(){
        //当用户点击按钮，后退一页
        this.$router.go(-1);
      }
    }
  }
  • 然后我们需要设置这个组件的路由规则
const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[
            { path:"/users",component:Users },
            //添加一个/userinfo的路由规则
            { path:"/userinfo/:id",component:UserInfo,props:true},
            { path:"/accesses",component:Access },
            { path:"/goods",component:Goods },
            { path:"/orders",component:Orders },
            { path:"/systems",component:Systems },
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})
  • 再接着给用户列表中的详情a连接添加事件
const Users = {
    data(){
        return {
            userList:[
                {id:1,name:"zs",age:18},
                {id:2,name:"ls",age:19},
                {id:3,name:"wang",age:20},
                {id:4,name:"jack",age:21},
            ]
        }
    },
    template:`<div>
        <h3>用户管理</h3>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="item.id" v-for="item in userList">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td>
                </tr>
            </tbody>
        </table>
    </div>`,
    methods:{
        goDetail(id){
            this.$router.push("/userinfo/"+id);
        }
    }
}

7.11.综合代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>基于vue-router的案例</title>
    <style type="text/css">
      html,
      body,
      #app {
        margin: 0;
        padding: 0px;
        height: 100%;
      }
      .header {
        height: 50px;
        background-color: #545c64;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        color: #fff;
      }
      .footer {
        height: 40px;
        line-height: 40px;
        background-color: #888;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .main {
        display: flex;
        position: absolute;
        top: 50px;
        bottom: 40px;
        width: 100%;
      }
      .content {
        flex: 1;
        text-align: center;
        height: 100%;
      }
      .left {
        flex: 0 0 20%;
        background-color: #545c64;
      }
      .left a {
        color: white;
        text-decoration: none;
      }
      .right {
        margin: 5px;
      }
      .btns {
        width: 100%;
        height: 35px;
        line-height: 35px;
        background-color: #f5f5f5;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
      }
      button {
        height: 30px;
        background-color: #ecf5ff;
        border: 1px solid lightskyblue;
        font-size: 12px;
        padding: 0 20px;
      }
      .main-content {
        margin-top: 10px;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul li {
        height: 45px;
        line-height: 45px;
        background-color: #a0a0a0;
        color: #fff;
        cursor: pointer;
        border-bottom: 1px solid #fff;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      td,
      th {
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 12px;
      }

      th {
        background-color: #ddd;
      }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
  </head>
  <body>
    <!-- 要被 vue 实例所控制的区域 -->
    <div id="app">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      // 定义 APP 根组件
      const App = {
        template: `<div>
          <!-- 头部区域 -->
          <header class="header">后台管理系统</header>
          <!-- 中间主体区域 -->
          <div class="main">
            <!-- 左侧菜单栏 -->
            <div class="content left">
              <ul>
              	 <!-- 子路由链接 -->
                <li><router-link to="/users">用户管理</router-link></li>
                <li><router-link to="/rights">权限管理</router-link></li>
                <li><router-link to="/goods">商品管理</router-link></li>
                <li><router-link to="/orders">订单管理</router-link></li>
                <li><router-link to="/settings">系统设置</router-link></li>
              </ul>
            </div>
            <!-- 右侧内容区域 -->
            <div class="content right"><div class="main-content">
            <!-- 子路由组件将会在router-view中显示 -->
        		<router-view></router-view>
            </div>
          </div>
          <!-- 尾部区域 -->
          <footer class="footer">版权信息</footer>
        </div>`
      }

      const Users = {
        data() {
          return {
            userlist: [
              { id: 1, name: '张三', age: 10 },
              { id: 2, name: '李四', age: 20 },
              { id: 3, name: '王五', age: 30 },
              { id: 4, name: '赵六', age: 40 }
            ]
          }
        },
        methods: {
          goDetail(id) {
            console.log(id)
            this.$router.push('/userinfo/' + id)
          }
        },
        template: `<div>
        <h3>用户管理区域</h3>
        <table>
          <thead>
            <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
          </thead>
          <tbody>
            <tr v-for="item in userlist" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>
                <a href="javascript:;" @click="goDetail(item.id)">详情</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>`
      }

      const UserInfo = {
        props: ['id'],
        template: `<div>
          <h5>用户详情页 --- 用户Id为：{{id}}</h5>
          <button @click="goback()">后退</button>
        </div>`,
        methods: {
          goback() {
            // 实现后退功能
            this.$router.go(-1)
          }
        }
      }

      const Rights = {
        template: `<div>
        <h3>权限管理区域</h3>
      </div>`
      }
      const Goods = {
        template: `<div>
        <h3>商品管理区域</h3>
      </div>`
      }
      const Orders = {
        template: `<div>
        <h3>订单管理区域</h3>
      </div>`
      }
      const Settings = {
        template: `<div>
        <h3>系统设置区域</h3>
      </div>`
      }

      // 创建路由对象
      const router = new VueRouter({
        routes: [
          {
            path: '/',
            component: App,
            redirect: '/users',
            children: [
              { path: '/users', component: Users },
              { path: '/userinfo/:id', component: UserInfo, props: true },
              { path: '/rights', component: Rights },
              { path: '/goods', component: Goods },
              { path: '/orders', component: Orders },
              { path: '/settings', component: Settings }
            ]
          }
        ]
      })

      const vm = new Vue({
        el: '#app',
        router
      })
    </script>
  </body>
</html>
彤彤的小跟班
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Vue】vue-router路由使用
weixin_45291798的博客
06-24 712
hash模式1.地址中永远带着#号，不美观。2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。3.兼容性较好。4.hash值不会包含在 HTTP 请求中，即:hash值不会带给服务器。history模式1.地址干净，美观。2.兼容性和hash模式相比略差。3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。1、如何配置路由？2、如何使用导航进行路由跳转声明式：router-link。
05-vue优化.md
03-31
为了解决这个问题，开发者可以在列表页缓存数据和滚动位置，然后在路由导航守卫中判断是从哪个页面返回，并使用缓存的滚动位置来滚动到用户之前浏览的位置。 通过上述内容，我们可以看出Vue优化不仅涵盖了代码层面...
06-Vue提高之前端工程化
07-06 585
文章目录01.模块化相关规范1.1.模块化概述1.2.浏览器端的模块化(过时)（了解）1.3.服务器端的模块化（了解）1.4.大一统的模块化规范—ES6模块化（重点）1.5.小结02.ES6模块化的基本语法2.1.默认导入/导出2.2.按需导入/导出2.3.直接导入并执行代码03.webpack（了解）3.1.当前 Web 开发面临的困境3.2.webpack 概述3.3.webpack的基本使用3.3.1.设置webpack的打包入口/出口：webpack.config.js3.3.2.设置webpack
【前端高频面试题--Vue路由篇】
qq_45832651的博客
02-08 1528
最新前端高频面试题Vue路由篇，不信来看！
25_Vue3路由-VueRouter的基本使用及动态路由和路由嵌套
酒客的博客
02-26 3732
Vue3路由之Vue-router的基本使用及路由嵌套和动态路由 认识前端路由 路由其实是网络工程中的一个术语： 在架构一个网络时，非常重要的两个设备就是路由器和交换机。 当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器： 事实上，路由器主要维护的是一个映射表； 映射表会决定数据的流向； 路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段： 后端路由阶段； 前后端分离阶段； 单页面富应用（SPA）； 后端路由阶段 早期的网站
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 5731
Vue-Router路由，编程式导航，动态路由，路由导航守卫
Vue Router 路由管理
xiangxiongfly
03-01 952
Vue Router 是 Vue.js 官方提供的路由管理插件，它可以让 Vue.js 应用程序实现客户端路由功能。 客户端路由是指在 Web 应用程序中，通过 JavaScript 代码来控制页面的跳转和切换，而不是通过后端服务器来控制。Vue Router 允许您将应用程序分解为多个视图，并通过 URL 来管理和导航这些视图。
从vue-router浅谈前端路由到前后端分离
qq_41841048的博客
05-21 1973
路由 此处的路由指的是页面跳转的规则，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。可以简单理解为url跳转 现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果，归功于其前端路由机制。 前端路由，顾名思
Vue3 ---＞vue-router 路由
ClearloveYt的博客
07-22 409
vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。vue-router 4.x 的基本使用步骤
基于springbot-vue前后端分离的注册登录功能
最新发布
2401_84089460的博客
05-26 2091
由框架可以看出，开发方式都是由自底而向上开发，因为在调用包的相关的作用的时候，是由上层去调用下层，所以先开发下层可以测试出项目功能能够实现多少后端整体框架1、 数据持久层是的目的是在java对象与数据库之间建立映射，也就是说它的作用是将某一个Java类对应到数据库中的一张表。在我们的项目中，就将创建一个实体类User映射到数据库的user表，表中的每个字段对应于实体类的每个属性。而之前配置的JPA的作用就是帮助我们完成类到数据表的映射。
vue-router基本使用、路由传参、懒加载、嵌套路由、导航守卫、keep-alive
鸢尾_的博客
06-01 1400
vue-router基本使用、路由传参、懒加载、嵌套路由、导航守卫、keep-alive
boke-vue
03-16
学习这个项目的过程中，可以进一步了解Vue.js的生命周期、组件化开发、状态管理、路由管理以及现代Web开发中的其他概念，如ES6语法、Promise、async/await等。 总之，"博克-vue"项目提供了一个基础的Vue.js应用...
07-vue-router详解.pdf
09-18
在Vue-router中，结合keep-alive可以缓存已经被访问过的路由组件实例，当用户再次访问相同的路由时，可以快速地渲染出之前的组件实例，而不是重新创建，这样可以提高应用的性能和用户体验。在路由配置中，可以将keep...
vue2笔记 — vue-router路由懒加载的实现
08-31
总结来说，Vue2中的vue-router路由懒加载是提高应用性能、优化用户体验的有效手段。通过合理地运用懒加载，开发者可以创建出更高效、更响应迅速的Vue应用。在实际开发中，结合代码分割（Code Splitting）和其他性能...
04- Vue基础之前后端交互通信
07-06 2182
文章目录Vue基础之前后端交互通信01.接口的调用方式1.1.URL地址格式1.1.1.传统形式的URL1.1.2.Restful形式的URL02.异步2.1.简介2.2.Promise用法2.2.1.Promise概述2.2.2.Promise的基本用法2.2.3.基于Promise发送Ajax请求(重要)2.3.4.then参数的函数返回值2.3.Promise基本API2.3.1.实例方法2.3.2.静态方法(可以直接使用对象调用)03.接口调用fetch用法(了解)3.1.fetch概述3.2.fe
JS中的类，函数，对象、原型
06-10 1125
JS中的类，函数，对象、原型
DOM以及DOM事件的处理方式
05-26 971
文章目录01.DOM概述02.DOM事件概述03. 事件属性（类型）04.事件对象05.事件的监听06.事件的捕获和冒泡07.阻止事件冒泡的方式 01.DOM概述 Document Object Model （DOM）文档对象模型：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM，可访问 HTML 文档的所有元素，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DO
前端发展概述
10-14 509
目录01 Vue概述02 前端知识体系2.1 前端三要素：HTML，CSS，JS2.2 HTML2.3 CSS2.3.1 什么是CSS预处理器？2.4 JavaScript2.4.1 常用的JavaScript框架2.5 主流UI框架(View层框架)2.6 JavaScript构建工具2.7 后端技术03 了解前后端分离的演变历史3.1 后端为主的MVC时代3.2 基于AJAX带来的SPA时代3.3 前端为主的MV*时代3.4 NodeJs带来的全栈时代3.5.总结 01 Vue概述 Vue是一套用于构建
CSS入门使用
06-29 409
文章目录01.CSS概述1.1.入门案例1.2.css代码规范02.css选择器2.1.基本选择器2.1.1.元素选择器：以HTML标签名作为选择器名称2.1.2.类选择器：class属性值作为选择器名称2.1.3.ID选择器：id属性值作为选择器名称2.2.基本选择器的组合方式03.css样式3.1.边框属性3.2.布局3.3.转换3.4.字体04.盒子模型05.css结合HTML5.1.内部样式(写在HTML文件中)5.2.外部样式(和HTML文件分开) 01.CSS概述 1.1.入门案例 <!D
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彤彤的小跟班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值