Vue3学习笔记（9.5）

Vue3路由

Vue路由允许完美通过不同的URL访问不同的内容。

通过Vue可以实现多视图的单页web应用（single page web application，SPA）

Vue.js路由需要载入vue-router库

可以使用npm命令进行安装：
 

cnpm install vue-router@4

简单实例

Vue.js+Vue-router可以很简单的实现单页应用

是一个组件，该组件用于设置一个导航链接，切换不同HTML内容。to属性为目标地址，即要显示的内容。

以下实例中我们将Vue-router加进来，然后配置组件和路由映射，再告诉vue-router在哪里渲染他们。代码如下所示：

 

 

  
Hello App!
  

    
    
    
    Go to Home
    Go to About
  
  
  
  

router-link

我们没有使用常规的a标签，而是使用一个自定义组件router-link来创建链接。这使得Vue router可以在不重新加载页面的情况下更改URL，处理URL生成以及编码。

router-view

router-view将显示与url对应的组件。你可以把它放在任何地方，以适应你的布局。

    
    
    
    
    
    


    

        
Hello App!
        

          
          
          
          Go to Home
          Go to Mez
        
        
        
        
      

      

 

 相关属性

to

表示目标路由的链接。当被点击后，内部会立刻把to的值传到router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

Home

Home


Home


Home


Home


User


Register

replace

设置replace属性的话，当点击时，会调用router.replace()而不是router.push()，导航后不会留下history记录。

append

设置append属性后，则在当前（相对）路径前添加其路径。例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配置了，则为/a/b

tag

有时候想要渲染成某种标签，例如

。预算我们使用tag prop类制定何种标签，同样它还是会监听点击，触发导航。

foo

foo

active-class

设置链接激活时使用的css类名。可以通过以下代码替代

   Router Link 1
   Router Link 2

注意这里 class 使用 active-class="_active"。

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

   Router Link 1
   Router Link 2

event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

Router Link 1

以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。