美文网首页
路由嵌套

路由嵌套

作者: zydecos | 来源:发表于2017-11-03 09:16 被阅读0次

模板抽离

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

首页新闻

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

// 1. 定义(路由)组件。constHome = { template:'#home'};constNews = { template:'#news'};

路由嵌套

实际应用界面,通常由多层嵌套的组件组合而成。

比如,我们 “首页”组件中,还嵌套着 “登录”和 “注册”组件,那么URL对应就是/home/login和/home/reg。

首页

登录注册

这是访问/home后的模板,其中我们需要把/home/login和/home/reg渲染进来。

完成上面代码后,HTML结构如下图:


登录和注册2个组件

登录界面注册界面

//定义路由组件constLogin = { template:'#login'};constReg = { template:'#reg'};

3.定义路由

// 2. 定义路由constroutes = [            { path:'/', redirect:'/home'},            {                path:'/home',                component: Home,                children:[                    { path:'/home/login', component: Login},                    { path:'/home/reg', component: Reg}                ]            },            { path:'/news', component: News}        ]

注意我们在home路由配置了它的children。这就是嵌套路由。

4.案例全部代码如下:

homenews

首页

登录注册新闻登录界面注册界面// 1. 定义(路由)组件。constHome = { template:'#home'};constNews = { template:'#news'};constLogin = { template:'#login'};constReg = { template:'#reg'};// 2. 定义路由constroutes = [ { path:'/', redirect:'/home'}, { path:'/home', component: Home, children:[ { path:'/home/login', component: Login}, { path:'/home/reg', component: Reg} ] }, { path:'/news', component: News} ]// 3. 创建 router 实例,然后传 `routes` 配置constrouter =newVueRouter({ routes// (缩写)相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,// 从而让整个应用都有路由功能constapp =newVue({ router }).$mount('#box')// 现在,应用已经启动了!

首页

登录注册新闻登录界面注册界面// 1. 定义(路由)组件。constHome = { template:'#home'};constNews = { template:'#news'};constLogin = { template:'#login'};constReg = { template:'#reg'};// 2. 定义路由constroutes = [ { path:'/', redirect:'/home'}, { path:'/home', component: Home, children:[ { path:'/home/login', component: Login}, { path:'/home/reg', component: Reg} ] }, { path:'/news', component: News} ]// 3. 创建 router 实例,然后传 `routes` 配置constrouter =newVueRouter({ routes// (缩写)相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,// 从而让整个应用都有路由功能constapp =newVue({ router }).$mount('#box')// 现在,应用已经启动了!

首页

登录注册新闻登录界面注册界面// 1. 定义(路由)组件。constHome = { template:'#home'};constNews = { template:'#news'};constLogin = { template:'#login'};constReg = { template:'#reg'};// 2. 定义路由constroutes = [            { path:'/', redirect:'/home'},            {                path:'/home',                component: Home,                children:[                    { path:'/home/login', component: Login},                    { path:'/home/reg', component: Reg}                ]            },            { path:'/news', component: News}        ]// 3. 创建 router 实例,然后传 `routes` 配置constrouter =newVueRouter({            routes// (缩写)相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由,// 从而让整个应用都有路由功能constapp =newVue({          router        }).$mount('#box')// 现在,应用已经启动了!

// 1. 定义(路由)组件。

const Home = { template: '#home' };

const News = { template: '#news' };

const Login = { template: '#login' };

const Reg = { template: '#reg' };

// 2. 定义路由

const routes = [

{ path: '/', redirect: '/home' },

{

path: '/home',

component: Home,

children:[

{ path: '/home/login', component: Login},

{ path: '/home/reg', component: Reg}

]

},

{ path: '/news', component: News}

]

// 3. 创建 router 实例,然后传 `routes` 配置

const router = new VueRouter({

routes // (缩写)相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由,

// 从而让整个应用都有路由功能

const app = new Vue({

router

}).$mount('#box')

// 现在,应用已经启动了!

相关文章

网友评论

      本文标题:路由嵌套

      本文链接:https://www.haomeiwen.com/subject/mabzpxtx.html