vue路由router

Posted 2021-05-15 鸟随二月

这里写目录标题

• 运行vuecli改变url不刷新
• router
• • 使用路由router
• router-link 补充
• 动态路由
• 路由的懒加载
• 嵌套路由
• 路由传递参数
• • 通过button跳转
• $ route和$ router
• 导航守卫（ 修改导航栏的标题）
• • 补充
• keep-alive

相关代码

运行vuecli改变url不刷新

1.URL的hash

2.html5的history模式：pushState 它相当于一个栈

3.HTML5的history模式：replaceState


4.HTML5的history模式：go

router

相关代码

使用路由router

例子：

index.js

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
//this.$route时routes中的活跃对象
const routes = [
  {
  //路由的默认路径
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({//this.$router是该对象
  // 配置路由和组件之间的应用关系
  routes,
  //HTML5的History模式 向url修改成history模式
  mode: 'history',
  linkActiveClass: 'active'//和后面“修改活跃的class文字”active-class等价
})

// 3.将router对象传入到Vue实例
export default router

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,//这是简写形式，基本形式 router:router
  render: h => h(App)
})

LearnVuejs06\\learnvuerouter\\src\\App.vue
1.

2.通过代码的方式修改

LearnVuejs06\\learnvuerouter\\src\\components\\About.vue

LearnVuejs06\\learnvuerouter\\src\\components\\Home.vue

router-link 补充

、

修改活跃的class文字

动态路由

01-learnvuerouter/src/components/User.vue

01-learnvuerouter/src/App.vue改成

向/router/index.js加入

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
  //路由的默认路径
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
   {
    path: '/user/:userId',
    component: user
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  //HTML5的History模式 向url修改成history模式
  mode: 'history',
  linkActiveClass: 'active'//和后面“修改活跃的class文字”active-class等价
})

// 3.将router对象传入到Vue实例
export default router

user改成

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>我是用户的相关信息, 嘿嘿嘿</p>
   <!--获取之前路径中的参数-->
    <h2>{{userId}}</h2>userId
    <h2>{{$route.params.userId}}</h2>
  </div>
</template>

<script>
  export default {
    name: "User",
    computed: {
      userId() {
        return this.$route.params.userId
      }
    }
  }
</script>

<style scoped>

</style>

总结

路由的懒加载

效果

懒加载的方式有

例子：
01-learnvuerouter/src/router/index.js进行一下改善

嵌套路由

实现嵌套路由有两个步骤:
创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用标签.
创建01-learnvuerouter/src/components/HomeMessage.vue

<template>
  <div>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeMessage"
  }
</script>

<style scoped>

</style>

创建01-learnvuerouter/src/components/HomeNews.vue

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeNews"
  }
</script>

<style scoped>

</style>

改变增加01-learnvuerouter/src/router/index.js

const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const Profile = () => import('../components/Profile')
......
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
     // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
  },
  {
    path: '/user/:userId',
    component: User,
  },
  {
    path: '/profile',
    component: Profile,
  }
]

修改01-learnvuerouter/src/components/Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>

    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "Home",
  }
</script>

<style scoped>

</style>

总结

路由传递参数

params例子前面有（动态路由）
例子（query）：

01-learnvuerouter/src/App.vue增加

   <router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">
      档案</router-link>

src/components/Profile.vue

<template>
  <div>
    <h2>我是Profile组件</h2>
    <h2>{{$route.query.name}}</h2>
    <h2>{{$route.query.age}}</h2>
    <h2>{{$route.query.height}}</h2>
  </div>
</template>

<script>
  export default {
    name: "Profile",
    created() {
      console.log('Profile created');
    },
    destroyed() {
      console.log('Profile destroyed');
    }
  }
</script>

<style scoped>

</style>

通过button跳转

 <!--<router-link :to="'/user/'+userId">用户</router-link>-->
    <!--&lt;!&ndash;<router-link to="/profile">档案</router-link>&ndash;&gt;-->
    <!--<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">-->
      <!--档案</router-link>-->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
......
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId)
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
    }
    }

$ route和$ router

$ router为VueRouter实例，想要导航到不同URL，则使用$ router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

src/main.js
在这里这样做，所有的vue示例都会有该东西

Vue.prototype.test = function () {
  console.log('test');
}
Vue.prototype.name = "二月鸟"
//也可这样做
 const obj = {
   name: 'why' }
 Object.defineProperty(obj, 'age', 18)

导航守卫（ 修改导航栏的标题）

1.笨办法，在每个页面中加上以下方法

2.
修改src/router/index.js

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    beforeEnter: (to, from, next) => {
      // console.log('about beforeEnter');
      next()
    }
  },
  {
    path: '/user/:id',
    component: User,
    meta: {
      title: '用户'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },o
  }
]
......
// 前置守卫(guard)
router.beforeEach((to, from, next) => {
  // 从from跳转到to ,两者的原型都是Route
  document.title = to.matched[0].meta.title
  // console.log(to);
  // console.log('++++');
  next()
})

补充

在index中还可以加

// 后置钩子(hook)
router.afterEach((to, from) => {
  // console.log('----');
})

补充一:如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
补充二:
上面我们使用的导航守卫, 被称之为全局守卫.
路由独享的守卫.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫.

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

总结 前置守卫必须使用next()，后置钩子不需要。

keep-alive

src/App.vue

 <keep-alive exclude="Profile,User"><!--组件中name属性-->
      <router-view/>
    </keep-alive>

src/router/index.js
home中的默认路径去掉

src/components/Home.vue加入以下函数

 data() {
      return {
        message: '你好啊',
        path: '/home/news'
      }
    },
......
//menthods
// 这两个函数, 只有该组件被保持了状态使用了keep-alive时, 才是有效的，前两个函数（组件激活和失效时调用），
    activated() {
      this.$router.push(this.path);
      console.log('activated');
    },
    deactivated() {
      console.log('deactivated');
    },
    beforeRouteLeave (to, from, next) {
      console.log(this.$route.path);
      this.path = this.$route.path;
      next()
    }