美文网首页
vue 2.0 路由的基本使用:

vue 2.0 路由的基本使用:

作者: lvyweb | 来源:发表于2018-06-28 17:41 被阅读26次

标签(空格分隔): vue


路由

1.  布局
    <router-link to="/home">主页</router-link>

    <router-view></router-view>
2. 路由具体写法
    //组件
    var Home={
        template:'<h3>我是主页</h3>'
    };
    var News={
        template:'<h3>我是新闻</h3>'
    };

    //配置路由
    const routes=[
        {path:'/home', component:Home},
        {path:'/news', component:News},
    ];

    //生成路由实例
    const router=new VueRouter({
        routes
    });

    //最后挂到vue上
    new Vue({
        router,
        el:'#box'
    });
3. 重定向
    之前  router.rediect  废弃了
    {path:'*', redirect:'/home'}

全部代码

    <body>
        <div id="box">
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/home">主页</router-link>
                <router-link to="/news">新闻</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
        <script src="vue.js"></script>
        <script src="./dist/vue-router.js"></script>
        <script>
              //组件
            var Home={
                template:'<h3>我是主页</h3>'
            };
            var News={
                template:'<h3>我是新闻</h3>'
            };
            //配置路由
            const routes=[
                {path:'/home', component:Home},
                {path:'/news', component:News},
                {path:'*', redirect:'/home'} //重定向
            ];
            //生成路由实例
            const router=new VueRouter({
                routes
            });
            //最后挂到vue上
            new Vue({
                router,
                el:'#box'
            });
    </script>
</body>
</html>

这样运行就实现了一个简单的单页面应用

相关文章

  • 五月下--vue 路由和脚手架

    vue路由 vue2.0路由基本使用: 一:基本使用: 1. 布局主页 2. 路由具体写法 //组件 (就是一个大...

  • Vue-Router2.0教程

    vue2.0 路由:http://router.vuejs.org/zh-cn/index.html基本使用: 布...

  • vue 2.0 路由的基本使用:

    标签(空格分隔): vue 路由 全部代码 这样运行就实现了一个简单的单页面应用

  • Vue路由

    前言 本文基于Vue2.0的简单路由的应用,更多路由详情请进入官网 简单路由基本使用 路由的简单方式官网中的栗子写...

  • VUE路由的简单使用

    VUE中如何使用路由? 路由的基本使用 在html中 引入vue 和 vue-router 包 创建vue对象并将...

  • vue-router

    前端路由的基本原理 vue-router的基本使用 命名路由 路由参数 嵌套路由

  • vue-router

    基本使用 下载安装路由 npm install vue-router 创建路由表a. 引入vue 和vue-ro...

  • Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变。看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件...

  • Vue.js 学习笔记(三)

    路由 vue-router 的基本使用 定义组件 定义 vue-router 关联到 Vue 实例 实现 效果展示...

  • VUE路由 (1.router与route区别 2.路由跳转传参

    路由的基本使用可参考 Vue路由使用总结 1.router与route的区别 1.router是VueRouter...

网友评论

      本文标题:vue 2.0 路由的基本使用:

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