How to use routing by directly referencing vue.js-Vue.js-php.cn

Home

Web Front-end

Vue.js

How to use routing by directly referencing vue.js

coldplay.xixi

Dec 17, 2020 pm 02:30 PM

routing

Directly quote the method of using routing in vue.js: first introduce [vue.JS] and [vue-router.JS]; then create the mounted dom element and create the routing component; then define the routing and Create a router instance; finally create a vue instance and mount it.

How to use routing by directly referencing vue.js

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

[Recommended related articles: vue.js]

Directly quote vue.js using routing:

It is very simple to use routing by directly introducing vue.js. You only need to directly introduce another vue-router.JS.

Specific implementation steps :

1, introduce vue.JS and vue-router.JS

<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">
</script>

2, create mounted dom element

<div id="app"></App>

3, create routing component

const com1 = {
template: &#39;<div > 路由 1</div>&#39;
}
const com2 = {
template: &#39;<div > 路由 2</div>&#39;
}

4, Define the route

const routes = [
   { path: &#39;/hash1&#39;, component: com1 },
   { path: &#39;/hash2&#39;, component: com2 }
]

5, Create the router instance

const router = new VueRouter({
   routes
})

6, Create the vue instance and mount it

const App = new Vue({
  router
}).$mount(&#39;#app&#39;);

The following is the specific code:

<!DOCTYPE HTML>
<HTML>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
      Document
    </title>
    <script src="https://unpkg.com/vue/dist/vue.js">
    </script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">
    </script>
  </head>
  
  <body>
    <div id="app">
      <h1>
        Hello !
      </h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/hash1">
          切换至 com1
        </router-link>
        <router-link to="/hash2">
          切换至 com2
        </router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view>
      </router-view>
      <!-- router-link 上的其他属性: -->
      <!-- 设置 replace 属性的话, 当点击时, 会调用 router.replace() 而不是 router.push(), 导航后不会留下
      history 记录. -->
      <!-- <router-link :to="{ path:&#39;/abc&#39;}" replace></router-link> -->
      <!-- 有时候想要 <router-link> 渲染成某种标签, 例如 <li>. 于是我们使用
      tag prop 类指定何种标签, 同样它还是会监听点击, 触发导航. -->
      <!-- <router-link to="/foo" tag="li">foo</router-link> -->
      <!-- active-class 设置 链接激活时使用的 CSS -->
      <!-- event 声明可以用来触发导航的事件. 可以是一个字符串或是一个包含字符串的数组. -->
    </div>
  </body>
  <script>
    // 1. 定义 (路由) 组件.
    const com1 = {
      template: &#39;<div > 路由 1</div>&#39;
    }
    const com2 = {
      template: &#39;<div > 路由 2</div>&#39;
    }
    // 2. 定义路由
    // 每个路由应该映射一个组件. 其中 "component" 可以是 通过 Vue.extend()
    //  创建的组件构造器, 或者, 只是一个组件配置对象.
    const routes = [{
      path: &#39;/hash1&#39;,
      component: com1
    },
    {
      path: &#39;/hash2&#39;,
      component: com2
    }]
    // 3. 创建 router 实例, 然后传 `routes` 配置
    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })
    // 4. 创建和挂载根实例.
    // 要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
    const App = new Vue({
      router
    }).$mount(&#39;#app&#39;); //el 是自动挂载, mount 是手动挂载(延时)
    
  </script>
 
</HTML>

Related learning recommendations: js video tutorial

The above is the detailed content of How to use routing by directly referencing vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Vue.js and the Frontend: Building Interactive User InterfacesMay 06, 2025 am 12:02 AM

Vue.js is a progressive framework suitable for building highly interactive user interfaces. Its core functions include responsive systems, component development and routing management. 1) The responsive system realizes data monitoring through Object.defineProperty or Proxy, and automatically updates the interface. 2) Component development allows the interface to be split into reusable modules. 3) VueRouter supports single-page applications to improve user experience.

What are the disadvantages of VueJs?May 05, 2025 am 12:06 AM

The main disadvantages of Vue.js include: 1. The ecosystem is relatively new, and third-party libraries and tools are not as rich as other frameworks; 2. The learning curve becomes steep in complex functions; 3. Community support and resources are not as extensive as React and Angular; 4. Performance problems may be encountered in large applications; 5. Version upgrades and compatibility challenges are greater.

Netflix: Unveiling Its Frontend FrameworksMay 04, 2025 am 12:16 AM

Netflix uses React as its front-end framework. 1.React's component development and virtual DOM mechanism improve performance and development efficiency. 2. Use Webpack and Babel to optimize code construction and deployment. 3. Use code segmentation, server-side rendering and caching strategies for performance optimization.

Frontend Development with Vue.js: Advantages and TechniquesMay 03, 2025 am 12:02 AM

Reasons for Vue.js' popularity include simplicity and easy learning, flexibility and high performance. 1) Its progressive framework design is suitable for beginners to learn step by step. 2) Component-based development improves code maintainability and team collaboration efficiency. 3) Responsive systems and virtual DOM improve rendering performance.

Vue.js vs. React: Ease of Use and Learning CurveMay 02, 2025 am 12:13 AM

Vue.js is easier to use and has a smooth learning curve, which is suitable for beginners; React has a steeper learning curve, but has strong flexibility, which is suitable for experienced developers. 1.Vue.js is easy to get started with through simple data binding and progressive design. 2.React requires understanding of virtual DOM and JSX, but provides higher flexibility and performance advantages.

Vue.js vs. React: Which Framework is Right for You?May 01, 2025 am 12:21 AM

Vue.js is suitable for fast development and small projects, while React is more suitable for large and complex projects. 1.Vue.js is simple and easy to learn, suitable for rapid development and small projects. 2.React is powerful and suitable for large and complex projects. 3. The progressive features of Vue.js are suitable for gradually introducing functions. 4. React's componentized and virtual DOM performs well when dealing with complex UI and data-intensive applications.

Vue.js vs. React: A Comparative Analysis of JavaScript FrameworksApr 30, 2025 am 12:10 AM

Vue.js and React each have their own advantages and disadvantages. When choosing, you need to comprehensively consider team skills, project size and performance requirements. 1) Vue.js is suitable for fast development and small projects, with a low learning curve, but deep nested objects can cause performance problems. 2) React is suitable for large and complex applications, with a rich ecosystem, but frequent updates may lead to performance bottlenecks.

Vue.js vs. React: Use Cases and ApplicationsApr 29, 2025 am 12:36 AM

Vue.js is suitable for small to medium-sized projects, while React is suitable for large projects and complex application scenarios. 1) Vue.js is easy to use and is suitable for rapid prototyping and small applications. 2) React has more advantages in handling complex state management and performance optimization, and is suitable for large projects.

See all articles