来自 服务器&运维 2019-12-14 06:31 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

vue-router:嵌套路由的使用方法_vue.js_脚本之家

模板抽离

上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。

一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由)

vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤:

我们已经学习过了Vue模板的另外定义形式,使用。

GitHub:

需要注意的是:父组件中的是子组件的占位符是必不可少的

准备一个根组件 vue.extend(); 需要做路由的内容准备 template; 准备路由 new VueRouter(); 关联路由 map 启动路由 start;//第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中

   首页   新闻 

1.嵌套路由的使用场景是什么呢?

嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现;子路由的内容进行切换,地址栏的路径也随之改变。

github上vue-router下载地址:

然后js里定义路由组件的时候:

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。

// 嵌套路由 { path: '/nest', component: () => import, // 嵌套路由的关键字children,在父路由中添加children数组 中添加子路径 children:[ { // 要注意,以 / 开头的嵌套路径会被当作根路径,这让你充分的使用嵌套组件而无须设置嵌套的路径。如果这里的path的值为'/son1将无法渲染son1子组件' path: 'son1', component: () => import }, ] }

关于路由跳转的简单代码如下:

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:vue-router:嵌套路由的使用方法_vue.js_脚本之家

关键词: