vue router study 01 router的编写和引用

vue router study 01 router的编写和引用

1. router编写

在vue-cli创建的项目里面进行代码编写

1.1 outer.js编写路径

1.2 index.js具体内容，讲解在注释里面

import Vue from 'vue' //引入Vue模块儿是为了让vue使用router
import VueRooter from 'vue-router'  //引入router模块儿

//以下是要引入的几个component
//可使用@/components/Demo , @代表根目录下
import Demo from '../components/Demo'
import Demo1 from '../components/Demo1'
import Demo2 from '../components/Demo2'
import Demo11 from '../components/demo11'
import Demo12 from '../components/demo12'

//显式声明 vue使用router组件
Vue.use(VueRooter);

export default
new VueRooter({

//router是一个数组，每个组员是一个对象，对象有path，name，component，children，等等属性
//具体可到vue官网查询router组件
  routes:[
    {
      //path前面一定要加上‘/’，不要忘记，否则要出大问题
      path:'/demo/:id',
      name: 'demo',
      component:Demo
    },
    {
      path:'/demo1',
      component:Demo1,
      name: 'demoa',
      //children属性
      children:[
        {
          //children里面的path属性不用加'/'
          path: 'demo11',
          component: Demo11
        },
        {
          path: 'demo12',
          component: Demo12
        }
      ]
    },
    {
      path:'/demo2',
      name: 'demob',
      component:Demo2
    }
  ]
})

2. 在main.js文件中引入

2.1 main.js文件位置，如下图：

• main.js具体内容，讲解在代码里面：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//这里要使router生效，引入我们写好的router组件，只要引入index.js所在的文件夹即可，并起名为router
//为什么要在index.js里面引入呢？因为这是全局的js，所有的组件都会拿到这里面声明的组件。
//加上router组件基本上是每个component都会用到的东西，所以就直接在这里进行声明
import router from './router' 

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  //我们因为是demo随便写的项目，所以第一个组件就是系统默认的App组件，就不更改了
  components: { App },
  template: '<App/>'
});

$如$ $果$ $感$ $觉$$写$ $的$ $还$ $不$ $错$ $，$$不$ $要$ $忘$ $记$ $点赞$ $评论$ $收藏$ $关注$