vue-router路由

作者: coffee1949 | 来源:发表于2019-06-02 21:48 被阅读0次

手写 Vue Router、手写响应式实现、虚拟 DOM 和 D
vue-router学习总结
2018-09-24 vue.js vue-router
路由
vue路由
Vue 基础 - 前端路由
10. vue-router 路由详解
一起学Vue：路由(vue-router)
vue-router用法记录
Vue-Router学习总结

起步：https://router.vuejs.org/zh/guide/#html

注意：是routes，不是routers

去掉#：mode：history
设置默认显示组件：
二级路由：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-router.min.js"></script>
    <!-- 第一步：引入第三方库，这里使用animate.css -->
    <link rel="stylesheet" href="http://unpkg.com/animate.css">
</head>
<body>
    <div id="app">
        <router-link to='/header'>header</router-link>
        <router-link to='/content'>content</router-link>
        <router-link to='/common'>common</router-link>
        <router-link to='/footer'>footer</router-link>


        <router-view/>
    </div>
    
    <script type="text/javascript">
        const Header = {
            template: `<h1>我是header</h1>`
        }
        const Content = {
            template: `<h1>我是content</h1>`
        }
        const Footer = {
            template: `<h1>我是footer</h1>`
        }
        const Common = {
            template: `<h1>我是common</h1>`
        }

        const routes = [
            {path: '/header',component: Header},
            {path: '/content',component: Content},
            {path: '/common',component: Common},
            {path: '/footer',component: Footer}
        ]

        var router = new VueRouter({
            routes
        })


        var app = new Vue({
            data: {
                show: false
            },
            router

        }).$mount('#app');


    </script>
</body>
</html>