vue 路由

蔚落 2022-06-07 10:54 356阅读 0赞

https://router.vuejs.org/zh-cn/

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

hash 和 history模式

默认hash模式：

以#/开始匹配，这种叫作哈希模式（hash）

HTML5 History 模式：

/开始，就是我们常见的方式没有 # 符号

  1. <a href="/">首页</a>
  2.     <a href="/work">工作</a>

我们此时使用a标签来切换比较麻烦，每次更改路由模式的时候，需要单独改a标签里面herf的链接

在vue里面提供了一个更好的方式，来解决这个问题

  1. <router-link to="/">home主页</router-link>
  2.     <router-link to="/work">我的工作</router-link>

每次切换路由的时候，里面的内容都依靠 来显示在页面上

只有页面有导航的地方，打算让组件显示在页面上，必须写这个标签

  1. <template>
  2.   <div id="app">
  3.     <router-link to="/">home主页</router-link>
  4.     <router-link to="/work">我的工作</router-link>
  5.     <router-view/> 这个标签用来显示页面内容
  6.   </div>
  7. </template>

router-link 默认解析成a标签

  1. <a href="#/" class="router-link-active">home主页</a>
  2. <a href="#/work" class="router-link-exact-active router-link-active">我的工作</a>

给导航添加激活样式

通过css里面设置

  1. .router-link-active{ background-color:red }

当我们单独设置激活样式的时候，根路由 / 永远都会匹配到样式

我们可以在标签中添加 exact 方式来解决永远都会匹配到跟路径样式问题

  1. 直接加在标签属性上
  2.     <router-link exact to="/">home主页</router-link>

我们自己来给导航添加自定义class名字

通过 设置 active-class属性值 改变默认的激活样式类

  1. <router-link to="/work" active-class="starkwang">我的工作</router-link>

统一更改激活样式

在 router/index.js里面设置 linkExactActiveClass属性

  1. export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', //通过设置这个属性值，给所有的激活样式，添加统一的类 当我们统一设置后，每次激活的路由标签，都带着自己设置的这个shudong类 <a href="#/work" class="shudong starkwang">我的工作</a>

使用属性 tag 统一更改路由编译后的标签名字 ->

    • 默认编译的标签名字是 a

    1. <router-link to="/stark" tag="li">我的Stark</router-link>
    3. 更改完后的dom
    4. <li class="shudong router-link-active">我的Stark</li>

    路由嵌套 chidren

    使用方式

    1. {
    2.             path: '/about',  // 这是一级路由
    3.             component: About,
    4.             children: [{  // 里面是嵌套路由
    5.                     path: 'blog',  //如果在这个嵌套
    6.                     name: 'blog',
    7.                     component: Blog
    8.                 },
    9.                 {
    10.                     path: '/info',
    11.                     name: 'info',
    12.                     component: Info
    13.                 }
    14.             ]
    15.         }

    如果在这个嵌套里面的path:’’ 留空，默认会显示这个组件

    1. http://localhost:8080/#/about
    2. 此时会把 这个默认留空的嵌套路由组件显示出来，也就是上面的blog 组件显示出来

    如果嵌套路由里面的path:’blog’ 写具体的路由,则访问的时候必须匹配

    1. 必须是这个路由精准匹配
    2.  http://localhost:8080/#/about/blog 
    3. 这样才会把这个blog嵌套路由组件显示出来

    以 / 开头的嵌套路径会被当作根路径。

    这让你充分的使用嵌套组件而无须设置嵌套的路径。

    1. {
    2.             path: '/about',  // 这是一级路由
    3.             component: About,
    4.             children: [{  // 里面是嵌套路由
    5.                     path: 'blog',  //如果在这个嵌套
    6.                     name: 'blog',
    7.                     component: Blog
    8.                 },
    9.                 {
    10.                     path: '/info', // 以 / 开头的嵌套路径会被当作跟路径
    11.                     name: 'info',
    12.                     component: Info
    13.                 }
    14.             ]
    15.         }
    17.     访问方式：
    18.     http://localhost:8080/#/info

    如果去掉/ 此时去掉了 ‘/info’ -> ‘info’

    1. {
    2.             path: '/about',  // 这是一级路由
    3.             component: About,
    4.             children: [{  // 里面是嵌套路由
    5.                     path: 'blog',  //如果在这个嵌套
    6.                     name: 'blog',
    7.                     component: Blog
    8.                 },
    9.                 {
    10.                     path: 'info', // 此时去掉了 '/info' -> 'info'
    11.                     name: 'info',
    12.                     component: Info
    13.                 }
    14.             ]
    15.         }
    17.       访问方式：
    18.     http://localhost:8080/#/about/info

    你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

    此时，基于上面的配置，当你访问 /about/info 时，about 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。

    重定向

    使用方式 path:’*‘

    这个 * 是匹配上面没有找到的路径，会到这里
    可以直接写：component: NotFound,

    redirect 这是一个函数，里面有参数 to
    to 打印出来是一个对象
    {name: undefined, meta: {…}, path: “/aaa”, hash: “”, query: {…}, …}

    通过 to.path 可以获取当前用户访问的路径，来写一些逻辑跳转下面是使用详细方式

    1. {
    2.     path: '*',
    3.     // component: NotFound,
    4.     redirect: (to) => {
    5.         console.log(to);
    6.         if (to.path === '/aaa') {
    7.             return '/work'
    8.         } else if (to.path === '/bbb') {
    9.             return '/info'
    10.         } else {
    11.             return '/'
    12.         }
    13.     }
    14. }

    最后附上所有路由文件代码

    1. import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Work from '@/components/Work' import Stark from '@/components/Stark' Vue.use(Router) const UserProfile = { template: `<div> 我是profile 组件 </div>` }; const UserPosts = { template: `<div> 我是UserPosts 组件 </div>` }; const Blog = { template: `<div> 我是Blog 组件 </div>` }; const Info = { template: `<div> 我是Info 组件 </div>` }; const NotFound = { template: `<div>404 您访问的页面不存在 </div>` }; const About = { template: `<div> 我是About组件 <router-view> </router-view> </div>` }; const User = { // template: '<div>User { { $route.params.id }}</div>' template: ' <div class="user"> \ <h2> User { { $route.params.id } } </h2> \ <router-view> </router-view> \ </div>' } export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', routes: [{ path: '/', name: 'Hello', component: HelloWorld }, { path: '/work', name: 'Work', component: Work }, { path: '/stark', name: 'stark', component: Stark }, // { path: '/user/:id', component: User } { path: '/user/:id', component: User, children: [{ // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] }, { path: '/about', component: About, children: [{ path: 'blog', name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }, { path: '*', // component: NotFound, redirect: (to) => { console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } } } ] })

    路由传参

    传一个参数

    1. 在路由里面的path:'/user/:stark'   这个冒号后面跟的字符串相当于 key 
    2. 在组件里面使用 this.$route.params.stark 来获取这个value的值
    3. 访问方式：
    5. http://localhost:8080/#/user/wang
    7. wang 就是console.log(this.$route.params.stark) 值
    9. 在后面跟 ？号
    10. 可以 写wang 或不写 后面的参数
    11. 如果不跟？号 ，必须写这个参数

    如果想传多个参数

    1. 在路由里面添加多个key
    2. path: '/user/:stark?/:name?
    4. 访问方式
    5. http://localhost:8080/#/user/wang/stark
    7. 打印结果 console.log(this.$route.params)
    8. {stark: "wang", name: "shudong"}
    10. { path: '/user/:stark?/:name?', name: 'user', component: User },

    案例：

    user 组件

    1. <template> <div> <router-link :to="'/user/' + item.id" v-for="item in userList">{ {item.username}} </router-link> <div> <p> 姓名：{ {userInfo.username}}</p> <p> 爱好：{ {userInfo.hobby}}</p> <p> 性别：{ {userInfo.sex}}</p> </div> </div> </template> <script> let data = [ { id:1, tip:'vip', username:'luchang', sex:'男', hobby:'coding' }, { id:2, tip:'vip', username:'guomian', sex:'男', hobby:'女' }, { id:3, tip:'common', username:'zhangming', sex:'男', hobby:'bug' }, ] export default{ data(){ return{ userList:data, userInfo:'' } }, watch:{ $route(){ this.getData(); } }, created(){ this.getData(); }, methods:{ getData(){ // let id = this.$route; console.log(this.$route); let id = this.$route.params.userId; if(id){ this.userInfo = this.userList.filter((item)=>{ return item.id == id; })[0] } console.log(this.userInfo); // console.log(this.$route.params.stark); } } } </script>

    路由

    1. import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Work from '@/components/Work' import Stark from '@/components/Stark' import User from '@/components/User' Vue.use(Router) const UserProfile = { template: `<div> 我是profile 组件 </div>` }; const UserPosts = { template: `<div> 我是UserPosts 组件 </div>` }; const Blog = { template: `<div> 我是Blog 组件 </div>` }; const Info = { template: `<div> 我是Info 组件 </div>` }; const NotFound = { template: `<div>404 您访问的页面不存在 </div>` }; const About = { template: `<div> 我是About组件 <router-view> </router-view> </div>` }; const Users = { // template: '<div>User { { $route.params.id }}</div>' template: ' <div class="user"> \ <h2> User { { $route.params.id } } </h2> \ <router-view> </router-view> \ </div>' } export default new Router({ // mode: 'history', mode: 'hash', linkExactActiveClass: 'shudong', routes: [{ path: '/', name: 'Hello', component: HelloWorld }, { path: '/work', name: 'Work', component: Work }, { path: '/user/:userId?/:name?', name: 'user', component: User }, { path: '/stark', name: 'stark', component: Stark }, // { path: '/user/:id', component: User } { path: '/users/:id', component: Users, children: [{ // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] }, { path: '/about', component: About, children: [{ path: 'blog', name: 'blog', component: Blog }, { path: '/info', name: 'info', component: Info } ] }, { path: '*', // component: NotFound, redirect: (to) => { // console.log(to); if (to.path === '/aaa') { return '/work' } else if (to.path === '/bbb') { return '/info' } else { return '/' } } } ] })

    发表评论

    表情：
    评论列表 （有 0 条评论，356人围观）

    还没有评论，来说两句吧...

    相关阅读

      相关 Vue--路由

      一、路由介绍 生活中的路由：设备和ip的映射关系 ![68244294505][] Vue中的路由：路径和组件的映射关系 ![68244304037][] 二、

      青旅半醒青旅半醒/ 0 赞/ 178 阅读

      相关 vue路由

      一、App.vue中的<router-view></router-view> 凡是定义到index.js中的组件，都会被渲染到App.vue中 二、路由跳转和a标签的

      秒速五厘米秒速五厘米/ 0 赞/ 459 阅读

      相关 vue路由

      Vue.js - vue路由 一 什么是路由 1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. 前端

      灰太狼灰太狼/ 0 赞/ 440 阅读

      相关 Vue路由

      Vue路由 一、路由 1.路由的发展 二、js原生监听hash值的变化 三、vue-router 四、vue-router的使用

      墨蓝墨蓝/ 0 赞/ 617 阅读