vue--关于路由的相关配置

路由相关配置

name:名称字符串                      //命名路由
path:字符串url                      //路径url
component:组件对象                  //url对应的路由组件
redirect:字符串url                 //路由重定向
children:[                        //子路由的配置
	{继续编程路由配置;但是path不能以/开头},
],
.....
props:true/[""]/route => ({})   //可以是布尔值,对象,函数(强大)

路由器相关配置

import Vue from "vue";
import VueRouter from "vue-router";
import routes from "../routes/routes"
Vue.use(VueRouter)

const router = new VueRouter({
  routes,  //routes:引入路由
  mode:'hash', //路由模式
  //对路由的模糊匹配;会自动给声明式导航加class
  linkActiveClass:"active",
  //对路由的精确匹配;会自动给声明式导航加class
  // linkExactActiveClass:"active"
})
export default router  //暴露

const router = new VueRouter({
    routes:路由数组
    mode:路由模式
    	hash:hash模式(url中会有#)
    		不会与静态资源服务器 & 后台路由 产生冲突; 
    		#后内容的变换 静态资源服务器和后台服务器感知不到	
    	history:history模式
    		生产时一定会使用history  url的变换理应让所有服务器都能感知到
    		会与静态资源服务器 & 后台路由 产生冲突
    		上线时一定要为所有的404请求配index.html
    		
    	linkActiveClass(常用的): 
    		对路由的模糊匹配;会自动给声明式导航加class
    	linkExactActiveClass: 
    		对路由的精确匹配;会自动给声明式导航加class
})

获取url上的信息

当使用上vue-router后 所有的vue组件都可以访问到一个叫$route的对象 代表的是当前命中的路由

通过$route.path       获取 url的path
通过$route.params     获取 url的params
通过$route.query      获取 url的query
通过$route.hash       获取 url的hash

重定向

//路由配置项redirect:字符串url
//当path为空时，跳转至home页
const routes = [
  {path:"/home",component:home,}
  {path:"",redirect:"/home"}
]

嵌套路由

import Home from "../components/Home"
import News from "../components/News"
import Message from "../components/Message"
const routes = [
{
    path:"/home",
    component:Home,
    children:[
      //子路由的path不能使用"/"开头,会被当作根路径
      {path:"news",component:News},
      {path:"message",component:Message},
      {path:"",redirect:"News"}
    ]
  },
]

path中正则表达式的使用

/user 命中 user组件 /user/1 ; /user/2 … 同样命中 /user id后使用？

{
    path:"/user/:id?",
    component:user
}

声明式导航

声明式导航 : <router-link to="path">信息</router-link>
使用声明式导航是可以使用到vue-router提供的一些功能的;
比如自动加什么样的class

<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
<router-link to="/user">User</router-link>

编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

当使用上vue-router后 所有的vue组件都可以访问到一个叫$router的对象;代表的是当前路由器

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。

$router.push(路径字符串)

<button @click="toNews">News</button>
export default {
    name: 'App',
    methods:{
      toUser(){
        this.$router.push("/news")
        //this.$router.push(`/user/${this.id}?name=damu&age=18`)
      }
    }
  }

使用对象形式：
$router.push({})

第一种情况：只需要path等，不需要params

<a href="javascript:;" 
class="list-group-item" @click="toNews">News</a>
export default {
    name: 'App',
    methods:{
      toUser(){
		this.$router.push({          
		          path:"news",
		          query:{
			          name:"xiaoming",
			          age:18
		 		   },
		 		  hash:`#${Date.now()}`                                            
			})  
        }
    }
}   

第二种情况：需要params时

使用对象形式时： $router.push({})
path和params不能同时使用
如果一定要用params 需要结合命名路由

<a href="javascript:;" 
class="list-group-item" @click="toNews">News</a>
export default {
    name: 'App',
    methods:{
      toUser(){
		this.$router.push({          
	          name:"news", //命名式路由
	          query:{
		          name:"xiaoming",
		          age:18
	 		   },
	 		   hash:`#${Date.now()}`                                            
	       }) 
       }
   }
} 

路由中做相对应设置name

import News from "../components/News"
const routes=[
    {
        name:"news",
        path:"/news",
        component:News,
    },
    {path:"*",redirect:"/home"}
]

声明式导航 vs 编程式导航

声明式导航 : <router-link to="path">信息</router-link>
使用声明式导航是可以使用到vue-router提供的一些功能的;
比如自动加什么样的class

编程式导航 :
当使用上vue-router后 所有的vue组件都可以访问到一个叫$router的对象
代表的是当前路由器
$router.push(路径字符串)

//使用对象形式时 path和params不能同时使用
//如果一定要用params 则得结合命名路由
    $router.push({          $router.push({
        path,                   name,
        query                   params,
                                query,
    })                      })

命名式路由

结合编程式导航来处理path和params不兼容的问题

//<router-link to="/news" class="list-group-item">News</router-link>
<a  href="javascript:;" @click="toNews">跳转到News</a>
//添加事件即可，不限制标签

跳转
   $router.push({
        name,
        params,
        query
   })
路由配置
	{name,path,component}

<a href="javascript:;"  @click="toNews">News</a>
export default {
    name: 'App',
    data(){
       return {
         id:""
       }
    },
    methods:{
      toUser(){
        this.$router.push({
        	//path:`/news`,  不能继续使用path
			name:"news",     //使用name
	        params:{
                id:this.id
             }
		 })
      }
    }
  }

路由配置：

import News from "../components/News"
const routes=[
    {
        name:"news",
        path:"/news",
        component:News,
    }
]

路由元信息

当我们写网站界面时，头部和底部出现次数比较频繁，往往需要设置为公用的组件；但登录注册页面一般是不需要公用的头部和底部（直接去除头部底部信息或设置另外简单的底部），这时我们需要用到路由元信息

例如以下代码，其他页面需要公用的头部底部，那我们可以取反去设置不需要的页面，通过meta:{}设置

const routes=[
    {path:"/test",component:test},
    {path:"/home",component:Home},
    {
	    path:"/login",
	    component:Login,
	    meta:{hideFooter:true}
    },
    {
	    path:"/register",
	    component:Register,
	    meta:{hideFooter:true}
    },
    {path:"/shopCart",component:ShopCart},
    {path:"/header",component:Header},
    {path:"/footer",component:Footer},
    {path:"/",redirect:"/home"}
]

在页面显示的文件中只需要在底部组件上写上对应的
v-show="!$route.meta.hideFooter" 即可

  <div id="app">
    <item-Header></item-Header>
    <router-view></router-view>
    <item-Footer v-show="!$route.meta.hideFooter"></item-Footer>
  </div>

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把
不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载
对应组件，这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

注意:
如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
链接: https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/.

//不使用懒加载写法
import Home from "pages/Home/Home"
const routes=[
    {path:"/home",component:Home}
]

//使用懒加载
const Home = () => import(/* webpackChunkName: "Home" */
 'pages/Home/Home');
const routes=[
    {path:"/home",component:Home}
]

使用 /* webpackChunkName: “名称” */ 来为打包的文件命名

导航守卫

全局钩子: beforeEach  beforeResolve  afterEach
路由独享: beforeEnter
组件级别: beforeRouteEnter beforeRouteUpdate beforeRouteLeave
完整的导航解析流程:
1.触发导航
2.在失活的组件内部掉组件级别的beforeRouteLeave钩子
3.调用全局的beforeEach钩子
4.如果是命中的动态路由组件(重复) 调用组件级别的beforeRouteUpdate钩子
5.调用路由独享级别的钩子beforeEnter
6.解析异步路由组件
7.在被激活的组件里调用 beforeRouteEnter (组件还没生成)
   this 是 undefined
8.  调用全局的 beforeResolve 守卫 (2.5+)。
9.  导航被确认。
10. 调用全局的 afterEach 钩子。
11. dom更新
12. beforeRouteEnter的next的回调参数被执行 vm作为参数传递给了该回调

关于路由基本设置请访问:
https://editor.csdn.net/md/?articleId=111184004.

关于路由生态圈： https://router.vuejs.org/zh/guide/.