Router-CNode社区笔记 3

路由跳转的一种方法

this.$router.push("/index");

watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  }

路由守卫
const isLoagin = localStorage.eleToken ? true : false;

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path =='/register') {
    next ();
  }else {
    isLoagin ? next() : next ('/login')
  }
})

###1. Route路由（注意:to route和route）

1. 在PostList中传送is

<router-link :to="{     //首页的文章标题
     name:'post_content',  //指定点击后的页面
    params:{     //传递参数
        id:msg.id
        }
    }">
    <span>{{msg.title}}</span>
</router-link>

2. 在文件夹router下的index.js声明组件

import Article from '../components/Article'
import PostList from '../components/PostList'

export default new Router({   //router下的index.js声明组件
  routes: [
    {
      name:'root', //定义name为root根目录页面
      path: '/',
      components:{
        main:PostList  //义name为root使用的组件
      }
    },
    {
      name:'post_content',    //定义name为post_content页面
      path: '/topic:id',
      components:{
        main:Article    //义name为post_content使用的组件
      }
    }
  ]
})

3. 在Article下接收参数

 methods:{
       getArticleData(){
           this.$http
           .get(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`)
           .then(res=>{console.log(res)})
           .catch(function(err){console.log(err)})
       }
   }

4. 在App.vue中声明main

    <router-view name="main"></router-view>

2. v-html

<div v-html="post.content" class="topic_content"></div>

3. style引入css文件

@import url('../assets/markdown-github.css');

4. v-if

<span v-if="reply.ups.length>0" >
         ☝ {{reply.ups.length}}
       </span>
         <span v-else>
       </span>