(一) Vue 路由+子路由

最新推荐文章于 2024-06-18 17:58:48 发布

amyloverice

最新推荐文章于 2024-06-18 17:58:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/amyloverice/article/details/78793646

版权

一、搭建vue脚手架

1、安装vue-cli：npm install -g vue-cli
2、初始化项目：vue init webpack 项目名
3、安装依赖：npm install

（npm 版本需要注意：npm: 2.14.20 should be >= 3.0.0，可以事先升级 node 为最新版本，直接下载 dmg 进行安装替换即可）

4、运行：npm run dev

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-cli</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

main.js

import Vue from 'vue'
import Router from './Router'//引入Router.js

Router.js

/**
 * Created by Amy on 2017/12/13.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

主路由
var first  = {template:'<div>first内容</div>'}
var second  = {template:'<div>second 内容</div>'}
var Home  = {template:'<div>Home 内容</div>'}
子路由
var firstFirst  = {template:'<div>firstFirst 内容</div>'}
var firstSencond  = {template:'<div>firstSecond 内容</div>'}

子路由模板
var asdf = {
  template:`
      <div class="asdf">
          <h2>组件</h2>
          <router-view class="adsf"></router-view>
      </div>
  `
}

var router = new VueRouter({
  mode:'history',
  base: __dirname,
  routes:[
    {path:'/',component:Home},
    {path:'/first',component:asdf,
        children:[
          {path:'/',component:first},
          {path:'first',component:firstFirst},
          {path:'second',component:firstSencond},

        ]
    },
    {path:'/second',component:second},
  ]
})

  new Vue({
    router,
    template:`
        <div id="r">
            <h1>导航</h1>
            <ol>
              <li><router-link to="/">Go to /</router-link></li>
              <li><router-link to="/first">Go to first</router-link></li>
                  <ol>
                      <li><router-link to="/first/first">firstFirst</router-link></li>
                      <li><router-link to="/first/second">firstSencond</router-link></li>
                   </ol>
              <li><router-link to="/second">Go to second</router-link></li>
            </ol>
            <router-view class="asdf"></router-view>
        </div>
    `
  }).$mount('#app')

amyloverice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(一) Vue 路由+子路由

一、搭建vue脚手架1、安装vue-cli：npm install -g vue-cli 2、初始化项目：vue init webpack 项目名 3、安装依赖：npm install（npm 版本需要注意：npm: 2.14.20 should be >= 3.0.0，可以事先升级 node 为最新版本，直接下载 dmg 进行安装替换即可）4、运行：npm r
复制链接

扫一扫