Vue路由

二级路由

不需要写/，vue会自动帮你拼接

@表示src文件夹的绝对路径.(常用与复杂项目构建时)

当需要写二级路由时，要在原先的vue界面加上一个视图容器<router-view>来承载组件.

 

 

嵌套路由:

一般工作中，到两级就够了，尽量不要超过三级，而<router-link>里的to属性一定要写端口号之后的完整路径.

 

 

命名视图.

可以用name属性给它一个新的名字.

<router-view name='abc'></router-view>

则需要在router.js里配置路由时，将原先的component改成components，并用name名和组件名对应的键值对形式放入路由配置.

 

 

编程式导航

之前用router-link写的导航叫声明式导航，

这样能让页面跳转到/detail

 

二者如何运用?

当页面中只是选项卡模式的部分切换，可以用router-link，如果是整个页面式的全覆盖，可以用编程式导航.

 

 

this.$router.push()的作用是把地址添在路由栈上.

this.$router.replace()的作用就是覆盖路由栈最上面的地址(在返回上一页时会生效)

this.$router.back()返回上一页

 

详见vue Router文档

 

 

 

重定向

redirect为重定向

router-link里exact active-class为精准匹配，完全相等才生效.

一般与之对应的会在路由里加上exact这个字段。

 

 

解决高亮样式:

①:

二级路由的重定向

{ path:'cn',components:{

                    abc:NewsCn

                }},

                { path:'en',components:{

                    def:NewsEn

                }},

                {path:'',redirect:'/news/cn'},

②:

并在news.vue里把router-link里的那个默认页面的to地址改为/

这样就保持着高亮样式的默认显示效果.

 

 

 

路由命名:

在路由里加名字，可以让编程式导航和声明式导航都可以去匹配指定名字的路由.

①:编程式导航

②:声明式导航

 

 

别名：

 

也是路由中的属性:alias

可用于路由跳转

这样就可以通过/dododo跳转到这个todolist界面了.

 

 

路由传参:

这样可以完成url地址的跟踪.

动态路由，常常用于列表页到详情页的动态传参.

在路由配置中，动态参数一定要加冒号，否则就变成了二级路由.

若跳转的路由有name名，则用下面这种方式

也可以完成动态传参

 

传多个参数：

有名字的:

无名字的：

在详情页如何接收动态参数?

 

PS:路由传参里

加上了props:true,则在详情页可以用下面这种方式接收

 

 

 

两种客户端的路由模式

hash和history模式：

mode='hash'

    缺点:URL中有一个#号，看上去不美观

    优点  :  部署到服务器上时，单页面应用程序被刷新时不会发生404

 

mode='history'

    优点:URL中没有#号

    缺点  :  部署到服务器上时，单页面应用程序被刷新时会发生404.

解决方法 : 让运维做重定向代理，做单页面应用程序，每次在客户端进行URL访问时，不论是什么路径，都让后端重定向到index.html。

 

目前市场用的最多的是Nginx服务器(静态资源)

#是路由的锚点

 

 

 

路由懒加载：

把当前用到的组件先加载，未被用到的组件不加载.

示例：

①：在引入模块时绑入箭头函数

②：写在routes里

 

 

Eg：

第一种:

第二种:

 

语法：

const Home = ()=>import('@/views/Home.vue');

作用：

应用程序中组件进行异步加载，节省应用程序初始化的性能.

结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组建的懒加载.