routejs怎么动态配置

Ⅰ vue route怎么直接加载某个路由'

方法/步骤

1
我们先来解决上一次的tab路由切换效果激动class的问题!我们不想让它点击其它路由链接的时候第一个的路由class处于激活状态.首先我们修改下min.js里面的路由配置文件.加上首页路由组件配置.红色圈的地方意思是,默认进来显示的路由路径,还有一个就是直接配置默认的路由路径,其实指向的都是同一个组件.

2
第二步,将导航的路由改动下.这里要注意的是,第一个router-link to不在是直接指向"/"了,而是"/home".然后我们在第一个路由内容的DIV上加一个动态class.用来判断当前的路由路径.写一个三元表达式.$route是一个路由对象,所有的路由都被存在这个对象当中.我们只需要进行判断当前路由是否指向home这个组件.如果是的话加上一个router-link-active如果不是的话就为空class.效果见第二张,第三张图片.

3
此时一个完整的路由切换效果就完成了.接下来就分享下嵌套路由是怎么弄的!首先找到min.js路由 配置文件.比如我们在home组件里加一个嵌套路由chi组件.首先要先创建这个chi组件,然后引入到min.js文件中.然后在home路由的里面加上children这个方法.这样,一个嵌套的子路由就配置好了.

4
到这里,在home组件中写一个入口进入这个嵌套的路由组件中去.嵌套路由点击进去,会进入到之前写好的chi.vue组件中去.

5
点击之后,就会显示.home里面的chi组件.并且显示chi组件中的内容

6
最后总结下这个的用法地方在哪里.吧比如一个首页中是路由进来的组件,而这个组件中又有一些类似切换tab功能.这时候切换来的也就是嵌套的子路由了.最后在讲个小的提示,就是,细心的同学可能发现,上面显示的chi组件中,下面的导航还在这里.如果说我不希望他出现呢?比如一个实际应用:首页组件展示新闻列表,点击新闻列表进入一个详情页面.此时如果下面的导航还显示的话就不太好了.其实点击新闻列表的时候就相当于上面分享的点击了子路由进入到一个详情组件(这里的chi组件).这个关于导航的问题会在下一次经验中给大家分享.
END
注意事项

主要是判断路由路径.
重点children用法.