Vue.js 简单的路由器开发实例代码

Basic Vue Router Example Vue.js是一款基于MVVM模式实现的交互式Web界面JS库。

VueJS, Router

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4748
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * Define your components
 */

// For 404 page
var notFound = Vue.extend({
    // You can use also use template path (Thanks to @jcerdan)
    // path : '/path/to/component.html'
    template: '<h1>Not Found</h1>'
})

// For dashboard. This is our root page
var dashboardComponent = Vue.extend({
    template: '<div class="jumbotron">' +
        '<h1>Dashboard</h1>' +
        '<p>This is dashboard</p>' +
        '<p>' +
        '<a v-link="{ path: \'/subroute\' }" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' +
        '</p>' +
        '</div>' +
        // To show nested subroute
        '<router-view></router-view>'
})

// About page.
var aboutComponent = Vue.extend({
    template: '<div class="jumbotron">' +
        '<h1>About</h1>' +
        '<p>This is about page</p>' +
        '<p>' +
        '<a v-link="{ path: \'/about/subroute\' }" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' +
        '</p>' +
        '</div>' +
        '<router-view></router-view>'
})

// Our subroute content.
var subRouteContent = Vue.extend({
    template: '<h1>Navbar example</h1>' +
        '<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>' +
        '<p>To see the difference between static and fixed top navbars, just scroll.</p>'
})

// Contact page content
var contactComponent = Vue.extend({
    template: '<div class="jumbotron">' +
        '<h1>Contact</h1>' +
        '<p>This is contact page</p>' +
        '</div>'
})

// Tell Vue to use view-router
Vue.use(VueRouter)

// Router options
var router = new VueRouter({
    history: false,
    root: '/'
})

// Router map for defining components
router.map({
    // For Not Found template
    '*': {
        component: notFound
    },

'/': {
        component: dashboardComponent,

// Defining Subroutes
        subRoutes: {
            '/subroute': {
                component: subRouteContent
            }
        }
    },

'/about': {
        component: aboutComponent,
        subRoutes: {
            '/subroute': {
                component: subRouteContent
            }
        }
    },

'/contact': {
        component: contactComponent
    }
});

var App = Vue.extend()

router.start(App, '#app')

编译

CSS

HTML

<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand">Vue Router Example</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a v-link="{ path: '/' }">Dashboard</a>
                    </li>
                    <li><a v-link="{ path: '/about' }">About</a>
                    </li>
                    <li><a v-link="{ path: '/contact' }">Contact</a>
                    </li>

</ul>
            </div>
        </div>
    </nav>

Basic Vue Router Example Vue.js是一款基于MVVM模式实现的交互式Web界面JS库。

VueJS, Router

编辑器支持Emmet

快捷键

Basic Vue Router Example Vue.js是一款基于MVVM模式实现的交互式Web界面JS库。

VueJS, Router

使用CKEditor v4和Vue.js v2实现的富文本编辑器实例代码

使用Vue.js实现的管理平台控制面板网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：