Vue—router-view组件使用方法

今天在做Vue项目的时候，想做一个点击导航不跳转新页面的效果，只在本页面打开内容。于是就想到了router-view组件，但是具体怎么使用呢，现在来总结一下使用方法：

最主要的是router.js路由，写法如下：

{
      path: '/',
      name: 'home',
      component: Home,
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'Index',
          component: Index
        }, {
          path: '/indextwo',
          name: 'indextwo',
          component: Indextwo
        }
      ]
}
在路由home下边编写需要在当前页面展示的所有页面作为子路由，redirect后边的是默认显示的第一个页面的路径。

路由写完之后在首页加上router-view标签

<router-view></router-view>
至此，便完成了router-view组件的使用

 

附加：Vue组件化使用scss

首先运行以下命令：

npm install sass-loader node-sass --save-dev
然后在style标签加上scss，如下：

<style scoped lang="scss">
这样便可使用scss啦