vue项目路由的使用

1、路由的基础配置

//需要在main.js文件内引入,具体可以查看我的另一篇关于main.js设置的文章

https://blog.csdn.net/weixin_44258964/article/details/105835057

• 以下配置主要是单独路由文件的配置
• 引入vue-router插件并使用
• 路由下主要分两种模式，具体可以看第二部分内容
• 路由是有路径（path）、名称（name）、组件（component）组成的
• 映射组件可有多种方式去处理，具体可以看以下代码

//路由的实现原理其实就是动态加载不同组件
import Vue from 'vue'
import VueRouter from 'vue-router’
//路径引入
import HelloWorld from '@/components/HelloWorld'
vue.use(VueRouter)
const router = new VueRouter({
mode: 'history’,//模式配置
routes: [
{
    path: '/‘,//指定当前匹配的路径
    name: 'HelloWorld’,//路由名字
//webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢
    component: HelloWorld//映射的组件
    //也可使用以下方式去注册，不需要提前引入该路径了，且实现懒加载，webpack会把每个路由都打包一个js，例如1.js\2.js这样的，在请求到该页面的时候才去加载这个页面js，
    //component: (resolve) => require(['@/views/tsTest'], resolve)
},
{
//配置动态id，使用$route.params.id获取动态
    path: '/router_test/:id',//路由传参
    name: 'routerTest',
    component: (resolve) => require(['@/views/routerTest.vue'], resolve)
},
 // 增加重定向，没有的路径自动跳转到首页
    {
      path: '*',
      redirect: '/'
    },
]
export default router

2、路由的两种模式

vue项目默认是hash模式
1、hash：就是常说的锚点（#），js通过hashChange事件监听url做的改变，ie7一下需要轮询
2、history ：可以使url像普通网站以一样用’/’分割，但是页面并没有跳转，需要服务端的支持

使用history模式，需要获取服务端的支持，以下是history配置

//第一种
//page.json文件里面配置
"scripts": { "dev": "webpack-dev-server --env.dev --history-api-fallback” }
//第二种
//webpack.config.js文件里面配置
devServer: {
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
}
},
//所有路由都会指向index.html

3、关于router的使用

一、使用内置的组件，默认会渲染成一个标签

<router-link to=“/“ tag=“li” replace></router-link>
//to是一个prop，指定需要跳转的路径
//replace不会留下History的记录，故不能使用导航后退一步返回上一个页面

二、可以在js里面进行的方式

1.this.$router.push() 等同于
描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
用法：

this.$router.push(‘home’)
this.$router.push({path:‘home’})
//路由传参数，但不会显示在url里
this.$router.push({name:’aaa’,params:{id:4}})
//通过this.$route.params.id获取
//带查询参数，会显示在url上/aaa?id=4
this.$router.push({path:’aaa’,query:{id:4}})
//通过this.$route.query.id获取
*****path和params搭配不会生效****

2.this.$router.replace()
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录

• 点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

• 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
• 浏览器中前进一步，等同于history.forward()、
  this.$router.go(1)
• 浏览器中后退一步，等同于history.back()、
  this.$router.go(-1),如果参数太大或太小就失败

4、路由的高级设置使用

• 设置页面标题（js使用window.document.title去设置标题），router使用导航钩子统一配置
• 在router配置里面加上meta属性

{
    path: '/‘,//指定当前匹配的路径
    component: (resolve) => require(['@/views/tsTest'], resolve),
    meta: {
        title: '路由使用'
    }
},

• 再配合钩子做统一处理，meta里面的对象可以自定义，故可以做很多全局设置的事，比如根据token属性判断页面是否登录

/*在跳转之前执行*/
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title
    next();//必须有!否则页面就会显示空白
})
//三个参数
To:即将进入的目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，方可进入下一个钩子；next()可以设置参数，根据参数去到不同页面
router.afterEach((to, from, next) => {
    Console.log(’跳转之后执行’)
    Next()//可以省略
})

5、其他

1、$route和 $router的区别

• 传值使用 $route
• 跳转使用 $router