vue-router.js,入门案例

理解vue-router的几个简单的概念

  1. 定义路由组件
  2. 创建router实例,并定义导航和组件的映射
  3. 创建vue实例,注入路由router

demo可直接复制粘贴使用,自行下载vue-router.js


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router-little-demotitle>
    <style type="text/css">
        #vuerouter{width: 300px;height: 500px;border: 2px solid #333;border-radius: 3px;margin:60px auto;position: relative;}
        .nav{width: 100%;}
        .nav a{display: inline-block;background: #eee;width:100%;height: 30px;text-align: center;font-size: 12px;line-height: 30px;border-bottom:1px solid #333;color: #333;text-decoration: none;}
        .content{width: 100%;height: 81%;margin-top: 2px;background:#abd8f9;}
        .div1,.div2,.div3{width: 100%;height:100%;font-size:18px;text-align:center;}
    style>
head>
<body>
    <div id="vuerouter">
        <div class="nav">
            <router-link to="/div1">点击模块1router-link>
            <router-link to="/div2">点击模块2router-link>
            <router-link to="/div3">点击模块3router-link>
        div>
        <div class="content">
            <router-view>router-view>
        div>
    div>
    
body>
<script src="src/vue.js">script>
<script src="src/vue-router.js">script>
<script>
    //定义路由对应的三个组件
    const vueDiv1 = {
        template:`
                
class="div1">这里是div1</div>` ` }; const vueDiv2 = { template:`
这里是div2div>` }; const vueDiv3 = { template:`
class="div3">这里是div3</div>` } //创建router实例,并定义导航和组件的映射,路径和模板 const router = new VueRouter({ //配置routes routes:[ { path:"/div1", component:vueDiv1 }, { path:"/div2", component:vueDiv2 }, { path:"/div3", component:vueDiv3 }, ] }) //创建vue实例,注入路由router const vuerouter = new Vue({ el:"#vuerouter", router:router }) script> html>

你可能感兴趣的:(vue)