美文网首页
VueRouter基本示例

VueRouter基本示例

作者: JohnYuCN | 来源:发表于2019-12-26 13:02 被阅读0次

    将官网说明书融合到一个网页中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
    <div id="app">
        <h1>Hello App!</h1>
        <button @click="goBack">go back</button>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">home</router-link>|
    <!--        这是一个命名路由,也是一个路由传参的演示-->
            <router-link :to="{name:'foo',params:{id:21}}">Go to Foo</router-link>|
            <router-link :to="{path:'/bar',query:{id:100}}">Go to Bar</router-link>|
            <router-link to="/other">Go other</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    
    <script>
        // 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
        // 1. 定义 (路由) 组件。
        // 可以从其他文件 import 进来
        const Foo = { template: '<div>命令路由foo,路径参数:{{$route.params.id}}</div>'
        }
        const Bar = { template: '<div>bar,查询参数:{{$route.query.id}}</div>' }
    
        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器,
        // 或者,只是一个组件配置对象。
        // 我们晚点再讨论嵌套路由。
        const routes = [
            {path:'/',component:{template:`<h1>首页</h1>`}},
            { path: '/foo/:id',
                name:'foo',
                component: Foo },
            { path: '/bar', component: Bar },
            {path: '*',component:{template:`<h1>404</h1>`}}
        ]
    
        // 3. 创建 router 实例,然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
            mode: 'history',
            routes // (缩写) 相当于 routes: routes
        })
    
        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由,
        // 从而让整个应用都有路由功能
        const app = new Vue({
            router,
            methods: {
                goBack() {
                    window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
                }
            },
            watch:{
                '$route' (to,from){
                    console.log(to+"....."+from);
                }
            }
        }).$mount('#app')
    
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:VueRouter基本示例

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