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

注：如果因为 node 问题安装失败，可使用下面命令安装指定低版本进行尝试

npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1

然后在style标签加上scss，如下：

<style scoped lang="scss">

这样便可使用scss啦