zoukankan      html  css  js  c++  java
  • vue2.0路由-适合刚接触新手简单理解

    vue路由:vue-router

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

    下载方式:npm install vue-router

    html:

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue路由</title>
        <script src="vue.min.js"></script>
        <script src="vue-router.min.js"></script>
    </head>
    <body>
        <div id="box">
            <div>
                <router-link to="/home">主页</router-link>
                <router-link to="/news">新闻</router-link>
                <router-link to='/about'>关于</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </body>
    </html>
    复制代码

    JavaScript:

    复制代码
        <script>
            //组件
            const Home = {
                template:'<h3>我是主页</h3>'
            };
            const News = {
                template:'<h3>我是新闻</h3>'
            }
            const About = {
                template:'<h3>我是关于</h3>'
            }
            //配置路由
            const routes = [ 
                {path:'/home', component :Home},
                {path:'/news', component:News},
                {path:'/about',component:About},
                //重定向
                {path:'*',redirect:'/home'}
            ]
            //生成路由实例
            const router = new VueRouter({
                routes
            })
            //挂载到vue上
            new Vue({
                router,
                el:'#box'
            })
        </script>
    复制代码

    CSS:

    复制代码
    <style>
        .router-link-active{
            background: #ccc;
            padding: 5px;
            text-decoration: none;
        }
    </style>
    复制代码

    总体:

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue路由</title>
        <script src="vue.min.js"></script>
        <script src="vue-router.min.js"></script>
        <style>
            .router-link-active{
                background: #ccc;
                padding: 5px;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div>
                <router-link to="/home">主页</router-link>
                <router-link to="/news">新闻</router-link>
                <router-link to='/about'>关于</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    
        <script>
            //组件
            const Home = {
                template:'<h3>我是主页</h3>'
            };
            const News = {
                template:'<h3>我是新闻</h3>'
            }
            const About = {
                template:'<h3>我是关于</h3>'
            }
            //配置路由
            const routes = [ 
                {path:'/home', component :Home},
                {path:'/news', component:News},
                {path:'/about',component:About},
                //重定向
                {path:'*',redirect:'/home'}
            ]
            //生成路由实例
            const router = new VueRouter({
                routes
            })
            //挂载到vue上
            new Vue({
                router,
                el:'#box'
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    POJ3233]Matrix Power Series && [HDU1588]Gauss Fibonacci
    [codeforces 508E]Maximum Matching
    [SDOI2011]染色
    [CSU1806]Toll
    [HDU4969]Just a Joke
    [HDU1071]The area
    [HDU1724]Ellipse
    [VIJOS1889]天真的因数分解
    [BZOJ3379] Turning in Homework
    [BZOJ1572] WorkScheduling
  • 原文地址:https://www.cnblogs.com/pangguoming/p/9101291.html
Copyright © 2011-2022 走看看